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

Question

如何让这个响应式图像或应该是什么，以适应它嵌套的父级？

我已经应用了正确的CSS，我没有在HTML中定义任何宽度或高度。这是我的CSS。

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

您可以在此处查看问题： http://www.client.noxinnovations.com/jensenblair/

大圆圈图片？这应该是响应。

谢谢！

Answer 1

我可能在这里遗漏了一些东西，但是设置：

height:100%;

因为图像适合我...

Answer 2

您只需要将max-width更改为width，如下所示：

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

Answer 3

我知道这是一个老问题，但如果你适用

  

显示：弯曲;

对于父级所有块类型元素，它们将具有父元素的最大宽度。