縮尺 1:1 の小さな画像を表示すると、ブロック状に見えることがよくあります。<img>より大きな縮尺の画像を使用し、css で目的のサイズを設定することで、タグを使用する際の問題を解決できます。
しかし、CSSで画像をロードしたいbackground: url(...)
これを行うときに、要素のサイズを画像サイズよりも小さく設定すると、画像が部分的にしか表示されなくなります。使用してこれを克服できますがbackground-size、これはクロス ブラウザーにあまり準拠していないことを理解していますか?
私が何を意味するかを見るためにここを見てくださいhttp://jsfiddle.net/uSqJW/
はい、background-sizeプロパティでこれを行うことができますが、その背景位置を削除するか、左と上からそれぞれ 0px 0px にする必要があります。このプロパティは、IE9 より下では機能しません。
比率オプションがないため、AFAIK background-size がサイズを設定する唯一の方法ですが、十分にサポートされています - http://caniuse.com/background-img-optsを参照してください
これは、高解像度の画像をロードする利点とメカニズムに関する良い記事ですhttp://www.html5rocks.com/en/mobile/easy-high-dpi-images/