37

背景画像をcontain次のように設定しました。

.el {
    background: url(path/to/img.jpg) no-repeat center center;
    background-size: contain;
}

しかし、それはイメージを拡大します。画像が元のサイズよりも大きくならないようにし、元の解像度に収まらない場合にのみ縮小します。

ここにデモがあります：http://jsfiddle.net/6W3yh/

CSSのみで解決策を探しています。
JavaScript は使用しないでください。

4

6 に答える 6

6

残念ながら、CSSではやりたいことはできません。

最善の策は、Javascriptを使用して背景サイズを設定することです。ただし、コンテナがそれよりも小さい場合に画像を縮小する場合は、画像の自然な高さを取得できる必要があります。

if ($('.el').height() < imageHeight) {
  $('.el').css('background-size', 'contain');
}
else {
  $('.el').css('background-size', 'auto');
}
于 2013-03-12T14:51:23.540 に答える
3

これには、デイブおじさんのOl'PaddedBoxテクニックを使用できます。これが実際の動作を示すフィドルです。

div {
    background: url(http://cdn4.iconfinder.com/data/icons/silent_night_icons/128/santa.png) no-repeat center center;
    background-size: 100%;

    width: 100%;
    max-width: 128px;
    height: 0;
    padding-bottom: 100%; /* (Image Height / Image Width) * 100%; */
}

唯一の問題は、これが機能するために画像の幅を知る必要があるということです。CompassのようなCSSプリプロセッサを使用している場合は、手動で行う代わりに、この作業をプロセッサにオフロードできます。その情報については、こちらをご覧ください。

于 2013-03-12T23:37:43.797 に答える
1

自然な幅/高さを取得するには、背景画像を html に入れて非表示にし、スクリプトで画像の幅/高さを取得します。

HTML:

<div></div>
<img id="background" style="display: none" src="http://cdn4.iconfinder.com/data/icons/silent_night_icons/128/santa.png" />

JS:

var backgroundSize = $('#background').css('width');
于 2013-03-12T14:55:27.697 に答える