0

Web ページにフルスクリーンの背景画像を設定したいと考えています。そのために background-size=cover を使用しています。それは私が望むものを正確に提供しますが、lt-IE9では機能しないため、cssフィルターを使用しています。

#container{
    position: absolute;
    height: 100%;
    width: 100%;

    background: url('img/dogs.jpg') no-repeat center center;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/dogs.jpg', sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/dogs.jpg', sizingMethod='scale');
}

しかし、背景に合わせるために画像を引き伸ばしているように見え、画像の縦横比を歪めています。誰かが他の解決策を提案できますか? どんな助けでも大歓迎です。

4

3 に答える 3

0

IE8 の場合:

100px X 150px の画像があるとします。

追加してみる

#container:after {
    content: '';
    display: block;
    padding-top: 150%  /*height/width * 100% */;
}

フィドル

マークアップ

<div>
    <img src="http://placehold.it/100x150" />
</div>

CSS

div {
    position: absolute;
    height: 100%;
    width: 100%;
}
div:after {
    content: '';
    display: block;
    padding-top: 150%;
}
img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width:100%;
}

注意: これを IE で実行してみましたが、jsFiddle は iE <9 モードでは動作しません。したがって、このソリューションが機能するかどうかはわかりません。

于 2013-10-07T07:22:35.187 に答える
0

また、バックストレッチ ( http://srobbin.com/jquery-plugins/backstretch/ ) を試してみると、同じ結果にbackground-size:coverなり、スライドショーも可能になります。本文でもコンテンツでも使用できます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
    $(".#container").backstretch("path/to/image.jpg");
</script>

または本体で呼び出す

<script>
    $.backstretch("path/to/image.jpg");
</script>
于 2014-09-23T15:24:26.307 に答える