1

助けを求めています。css で背景として設定され、div に適用される画像 (.essentials) を比例してスケーリングしようとしています。

ウィンドウを小さくすると、画像は比例してサイズが変更されますが、問題は、div までの高さが同じに保たれ、大きなギャップが残ることです。

フォールバックに modernizr を使用して、svg イメージを取得するために svg がサポートされているかどうかを検出し、IE8 以下の png 画像を取得しない場合は検出します。

以下のHTML

<div class="essentials"></div>

以下のCSS

.essentials{
    margin-bottom: 5em;
    height: 505px;
}
.svg .essentials{
    background: url("../images/myEssentials.svg") no-repeat;
    background-size: contain;
}
.no-svg .essentials{
    background: url("../images/myEssentials.png") no-repeat;
}
4

1 に答える 1

0

div にコンテンツがないと仮定して、たとえば次のように使用します。

padding-bottom: 50%; // 2:1 aspect ratio

IE6 および IE5 のサポートを追加するには、以下を含めます。

height: 0; // IE6 (hasLayout)

(div にコンテンツがある場合は、追加のラッパー div が必要です。これはすべてhttp://alistapart.com/article/creating-intrinsic-ratios-for-videoから取得したものです)。

于 2013-06-29T16:56:31.163 に答える