html - レスポンシブにサイズ変更する画像に問題がある

Question

これが私の img 構文用の CSS です。ただし、ブラウザーのサイズ変更中に応答してサイズ変更する必要があります。これは Chrome では動作しますが、何らかの理由で IE と FIREFOX が動作しません - 理由はありますか? すべて最新のものを使用しています。

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

Answer 1

img max-width: 100% は、レスポンシブ画像に適した手法ですが、実際のレスポンシブ性を確認するには、画像コンテナー (画像を保持/ラップする要素) と連携する必要があります。

これを試してみると、クロスブラウザで動作するはずです:

<div class="imgHolder">
    <img src="http://www.thoughtfeast.co.uk/wp-content/uploads/Big-Data-2-1024x522.jpg" >
</div>

したがって、画像は div でラップされます。CSS は次のようになります。

.imgHolder{
    width: 100%;
    max-width: 1000px;
    padding: 10px;
    border: 3px dashed red;
    margin: 10px auto;
}

.imgHolder img {
       max-width: 100% 
}

ここでコードペンを確認できます