遇到圖像調整大小的問題

Question

繼承人我的CSS，我有我的img語法。但是，它應該在瀏覽器調整大小時響應地調整大小。這適用於Chrome，但IE & FIREFOX由於某種原因不起作用 - 是有原因的？我正在使用最新的。

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

Answer 1

的IMG最大寬度：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% 
} 

您可以檢查codepen here