響應式容器中的響應式圖像？

我該如何獲得這個響應式圖像，或者應該是什麼，以適應嵌入它的父級？響應式容器中的響應式圖像？

我已經應用了正確的CSS，我沒有在HTML中定義任何寬度或高度。這是我的CSS。

.header { 
    height: 25%; 
    width: 95%; 
    padding: 2.5%; 
    background: #fff; 
} 
.header img { 
    max-width: 100%; 
    height: auto; 
}

大圈子的形象？這應該是響應式的。

謝謝！

我可能失去了一些東西，但設置：

height:100%;

對於圖像爲我的作品...

2012-09-19 22:09:42 Alan

這真棒@Alan。謝謝。但爲什麼？我好奇。 –

100％是說圖像的高度應該是容器高度的100％。由於容器被定義爲視口高度的百分比，因此它會縮放，因此圖像也是如此。 – Alan

太棒了！非常感謝。這說得通 ;）。 –

你只需要改變最大寬度與寬度，像這樣：

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

2014-03-07 23:17:55

我知道這是一個老問題，但如果你aplly

顯示：flex;

對於所有塊類型的元素，它們將具有父元素的最大寬度。

2015-09-16 11:10:54

回答