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

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

我知道这是个老问题，但如果你真的

显示:flex；

对于父元素，所有块类型元素的最大宽度都是父元素。