web-dev-qa-db-ja.com

JavaScriptのボタンサイズに合わせて背景画像を比例的に縮小するにはどうすればよいですか？

JavaScriptでチェス盤を作っています。チェス盤の四角（ボタン）はもともと60x60ピクセルになるように設計されていましたが、現在は40x40ピクセルです。

    button 
    {
      width:40px; 
      height:40px; 
      border: 0
    }

ただし、この以前のチェスボード用に設計された作品の一部は、まだ60x60ピクセルです。 Javascriptで正方形のサイズに合わせて画像を比例的に縮小する方法はありますか？現在、画像は正方形のサイズに適合していますが、縮小していませんので、私が言うとき、

    square.style.backgroundImage = imgLink; // square is the button, imgLink is "WhiteKing.jpg" for example.

私はこのような作品を手に入れます-

enter image description here

WhiteKing.jpgが比例して縮小した場合、うまく収まります。 Javascriptでこれを行う方法はありますか？どんな助けも本当に感謝されます。

javascriptbackground-image
24
CodeBlue

最近のほとんどのブラウザはCSSをサポートしています background-image options like background-size、したがって、あなたは本当にこのようなものを使用するかもしれません：

button{
  width:40px; 
  height:40px; 
  border: 0;
  background-size: 100%; /* To fill the dimensions of container (button), or */
  background-size: 40px auto; /* to specify dimensions explicitly */
}

もちろん、JavaScriptでも使用できます（ただし、ボタンの既存のCSSに追加することをお勧めします）。

square.style.backgroundSize = '100%';
36
Juicy Scripter

使用する予定：背景サイズ：100％;

3
Ken Wheeler

これを行う方法にはさまざまなオプションがありますが、私なら、実際の画像ファイルのサイズを物理的に変更して、画質を最適に制御します。多数のファイルがあり、これがPhotoshop（または使用する画像エディター）で行うのに時間がかかる場合は、 ImageMagick のようなものと組み合わせてお気に入りのスクリプト言語を使用し、コンピューターに実行させますそれが最高のこと;）

CSS

Juicy Scripterで言及されているCSS3 background-sizeを使用します。ただし、background-sizeは新しいCSS属性であり、古いブラウザーでは機能せず（<IE 8）など）、他のブラウザーではベンダープレフィックスが必要になる場合があります。

HTML

実際のimgタグでチェスの駒の画像をロードし、そのhtml要素の幅を変更します（これはおそらくページのレンダリングを遅くしたり、ちらつきやその他の望ましくない奇妙さを引き起こす可能性のあるリフローを引き起こします）。おそらく、実装に応じて異なる位置決め手法（position、z-indexなど）を使用する必要があります。

マニュアル

画像を物理的に小さくするだけです。これは、最終的に、画像の品質を最大限に制御できるようになるため、最良の（最も時間がかかるとしても）オプションだと思います。ブラウザによって、画像のサイズを予測できない方法で変更することがあります（サイズ変更の処理方法によって異なります）。自分でサイズを変更すると、画像が意図したとおりに表示されることが保証されます。

2
robmclarty

おそらく、position:relativeとbackground-color:transparentをボタンのスタイルに追加してから、topとleftを0pxに設定するボタンタグ内でdivを使用してみてください。このdiv内に、新しい幅/高さ（40px）に設定されたスタイルを持つボタングラフィックのタグを入力してください。

グラフィックの上に何も配置したくない場合は、グラフィックの絶対位置を使用する必要はないかもしれません。その場合、divでz-indexを使用して、テキストなどの後ろに移動します。

それをやってみてください。うまくいきますように！ ：D

0
Chris M