0

ブロック内に画像があります。100%私の画面の幅の画像を取ります。親ブロック500pxは高さを取り100%、画面の幅も取ります。親ブロックに設定overflow: hiddenしたので、画像の最初の 500px のみを高さで表示できます。

さて、私の問題は、ブラウザのウィンドウのサイズを変更するときに、画像を背景と同じように拡大縮小する必要があることです。パフォーマンスの問題 (リフローなど) のため、背景画像を使用できません。

私はこのフィドルを作りました。2番目の画像を最初の画像と同じ反応にするにはどうすればよいですか? 私の場合、画像の解像度はランダムであることに注意してください。

ご協力ありがとうございました!ソリューションが JS/jQuery である必要がある場合は問題ありません。

4

1 に答える 1

3

に と を設定する必要がmin-widthありmin-heightますimg。これは、ラッパーに比例する必要があります。したがって、画像サイズが のフィドルの例で1024/768は、このフィドルが示すとおりです。

min-width: 333.33px; /* the ratio of height of img to height of wrapper applied to img width */
min-height: 250px; /* the height setting of the wrapper */
于 2013-07-11T15:31:40.097 に答える