响应式容器中的响应式图像？

我该如何获得这个响应式图像，或者应该是什么，以适应嵌入它的父级？响应式容器中的响应式图像？

我已经应用了正确的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

回答