0

私は最近、この問題を実験しました。

<div class="row">
    <div class="column">
        <img id="first" width=275 height=385 src="flower-275x385.jpg" />
    </div>
    <div class="column">
        <img id="second" width=100 height=400 src="flower-275x385.jpg" />
    </div>
    <div class="column">
        <img id="third" width=500 height=150 src="flower-275x385.jpg" />
    </div>
    <div class="column">
        <img id="fourth" width=75 height=150 src="flower-275x385.jpg" />
    </div>
    <div class="column">
        <img id="fifth" width=750 height=550 src="flower-275x385.jpg" />
    </div>
</div>

<style>
    .row {
        width:100%;
        overflow:hidden ;
    }
    .column {
        width:20% ;
        float:left ;
    }

    .column img {
        width:100% ;
        height:auto ;
    }

</style>

HTML 側では、同じ画像に対して多くの異なるサイズがあります.
しかし、ブラウザは画像の自然なサイズのみを処理します.
これが、JSFiddle の結果側ですべての画像を同じサイズでレンダリングする理由
です. ブラウザに HTML ベースの幅/高さを強制的に処理させるためのホット?

これがそのJSFiddleです。

編集: JS なしでそれを行う方法はないようです: My Solution、上記のアドバイスに感謝します!

4

2 に答える 2

0

width:100% ;マークアップで指定されたサイズを適用する場合は、CSS から を取り出します。そうしないと、すべての画像がコンテナーの幅に合わせてサイズ変更され、すべてのコンテナーが同じ幅になるように設定されます。

于 2013-02-09T14:25:46.620 に答える
0

同じ幅で自動計算された高さが必要な場合は、最初に画像に適用した高さのスタイルを削除します。

.column img {
    width:100% ;
    /*height:auto ;*/
}

次に、画像からすべての幅と高さの値を削除します。

<img id="first" src="flower-275x385.jpg" />

参照: http://jsfiddle.net/e2jQD/10/

于 2013-02-09T14:26:07.320 に答える