だから、これは奇妙なものです。
私はWordpressのテーマに取り組んでおり、テーマは完全にレスポンシブであるはずです. クリックするとライトボックスで開く3つのサムネイルの複数の行で構成される一種の「ギャラリー」を作成しました。レスポンシブな「正方形」要素を作成するためのコードのスニペットをオンラインで見つけました。CSS のみを使用して、レスポンシブ幅に合わせて高さが調整される要素。これには、パーセンテージ (50% など) で幅を設定してから、 と を設定することが含まれheight:0px;ますpadding-bottom:50%;。先に進み、すべての画像をこのようにサイズ変更されるレスポンシブ コンテナーに配置し、画像の最大幅と最大高さを設定して、レスポンシブ スクエア コンテナーがオーバーフローしないようにしました。
これは、ie7 用に保存されたすべてのブラウザーで期待どおりに表示されます。ie7では、画像が消えるようです。フィドルを添付しました（正確なコードではありませんが、それでも問題が発生します）。http://jsfiddle.net/pwGYc/
実際のコードは次のとおりです。
HTML:
<a href="<? echo $photo["url"]; ?>" class="photo" title="<? echo $photo["title"]; ?>">
<img src="<? echo $photo["url"]; ?>" alt="<? echo $photo["alt"]; ?>" title="<? echo $photo["title"]; ?>" />
</a>
CSS:
.photo{
float:left;
margin:10px;
width:30%;
height:0px;
overflow:hidden;
padding:5px 0px 30% 0px !important;
box-sizing:border-box;
position:relative;
}
.photo img{
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
margin:auto;
max-height:97%;
max-width:97%;
}