0

ブラウザの高さに基づいて画像を拡大縮小しようとしています。

ChromeとSafariで動作しているようですが、Firefoxで確認すると、画像は元のサイズのままです。

これが私がこれまでに持っているコードです。

HTML：

<div class="full-width">
    <div class="image-wrapper">
        <div class="images">
            <img src="http://farm8.staticflickr.com/7165/6840151639_b31263de71_b_d.jpg" />
            <img src="http://farm8.staticflickr.com/7165/6840151639_b31263de71_b_d.jpg" />
        </div>
    </div>
</div>

CSS：

.full-width {
    height: 100%;
    width: 100%;
    position: absolute;
}

.image-wrapper {
    position: absolute;
    right: 0;
    width: 50%;
    height: 55%;
    margin-right: 15px;
}

.images {
    position: absolute;
    right: 0;
}

.image-wrapper img {
    display: block;
    height: auto;
    max-height: 50%;
    width: auto\9; /* ie8 */
}

ここで実際の例を見ることができます：http：//jsfiddle.net/Pywak/

4

3 に答える 3

0

position:absolute;親コンテナなしで与えるposition:relative;と、ブラウザのサイズを変更したり、画面の解像度を変更したりすると、常に問題が発生します。

img タグの代わりに背景画像として使用し、background:contain;||を使用することをお勧めします。background:cover;財産。

于 2013-03-20T18:02:32.463 に答える
0

すべての絶対配置は、比例サイズの計算を破ります。要素間に親子関係はなくなりました。

于 2013-03-20T17:58:47.580 に答える