0

http://jsfiddle.net/CJzCA/

上記のjsfiddleでわかるように、キーボードの画像はテキストに比べて大きすぎます。通常、フォトショップを使用してこれを解決しますが、代わりにcssを使用して画像のサイズを（縮尺どおりに）変更する方法はありますか？

次に、jsfiddlerで値を微調整して画像のサイズを変更し、スクリーンショットを作成して結果をトリミングして正しい画像サイズに固定するのと同じくらい簡単です。これは非常に便利な時間の節約になります。

4

2 に答える 2

2

background-size: contain;アスペクト比を維持し、要素内に画像を保持するために使用できます。

.dbutton, .ctrlbutton {
    vertical-align: middle;

    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

デモ： http： //jsfiddle.net/Blender/CJzCA/2/

widthこれで、とを個別に微調整できheight、画像は常に見栄えが良くなります。

于 2012-09-30T04:07:44.080 に答える
1

画像の各リンクのimg内側を作成し、幅と高さをcssで目的の値に変更するだけです。これにはCSS3は必要ありません。

于 2012-09-30T04:02:17.310 に答える