类似的问题还有很多，但都没有解决我的需求：
- 应保持纵横比，并且
- 高度响应，并且
- 宽度响应，并且
- 应始终在浏览器窗口中看到完整图像（即响应能力应针对最紧密的尺寸）。
我已经满足了这些要求，但并不是同时满足所有要求。例如：
如果我让下面的代码保持原样height="90%" width="auto"那么它是高度响应的但不是宽度响应的。
如果我改为height="auto" width="90%"那么它是宽度响应的但不是高度响应的。
如果我改为height="90%" width="90%"那么它的高度和宽度都会响应，但比例不会保持。
要进行测试，请“运行代码片段”并通过更改浏览器窗口的高度和宽度来检查“整页”情况。
.test {
height: 90vh;
width: 90%;
background-color: #222;
color: #eee;
padding: 2rem;
}
.test img {
align-items: center;
}
<div class="test">
<img height="90%" width="auto" src="https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80">
</div>
我已经以许多不同的方式进行了测试（例如使用最大宽度等），但到目前为止尚未成功。
知道如何更改上述代码以便同时满足所有要求吗？
您可以使用max-width and max-height一起在图像上，然后它将保持您的纵横比并始终适合屏幕并显示完整的图像
body {
margin: 0;
}
.test {
background-color: #222;
color: #eee;
padding: 2rem;
height: 90vh;
width: 90%;
box-sizing: border-box;
}
.test img {
margin: auto;
display: block;
max-width: 100%;
max-height: 100%;
}
<div class="test">
<img src="https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&q=80">
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
