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

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

我知道这是一个老问题，但如果你同意

显示：弹性；

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