Question

这些是约束：图像必须始终保持其原始宽高比。如果父容器的宽度太小，则调整图像大小以适应它。图像的最大高度为400像素。图像的最大宽度是父容器的宽度。问题：当受到父级宽度的限制时，图像不会保持其宽高比。这是我的CSS：

img.myImage {
    width:auto;
    height:auto;
    max-width:100%;
    max-height:400px;
}

编辑：要添加难度，这是父组件：

div.programContainer {
    width: 100%;
    max-width: 1300px;
    padding: 10px;
    text-align: left;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: space-around;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

编辑：解决方案： 对不起，这与图像本身无关，删除父容器中不必要的弹性框解决了问题。

Answer 1

你可以使用这样的css：

.img-responsive{
    display: block;
    height: auto;
    max-width: 100%;
}

<img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg" class="img-responsive" alt="Rafique">

Answer 2

正如@EdangJeorlie所说，在调整浏览器大小时，您需要width: 100%来调整图像大小。一个例子是JSBin上的here。

就像单挑一样，我相信你可以摆脱height: auto因为那是默认的。希望这有帮助！

响应式图像问题

2 个答案: