aspect-ratio - 使用 max-width 和 max-height 约束图像大小，具体取决于哪个是真的

Question

试图找出一种方法，使我可以通过最大高度和最大宽度方案将纵向和横向图像调整为视口大小。

只要宽度不超过 1050 像素，图像应保持 100% 宽度。另一个限制条件是图像的高度最多应为 800 像素。所以无论哪个是“真的”，首先应该限制图像的大小。

如果我设置max-width: 1050px然后max-height: 800px;图像的纵横比就搞砸了。（如下面的演示所示）。还有一个问题是图像宽度会比实际图像宽（836px宽度的纵向图像会放大到1050px）。是否可以仅使用 CSS 进行控制？

演示

Answer 1

您可以使用 CSS3视口单元来实现这一点，尽管实际的浏览器支持仍然有限。

Answer 2

在朋友的帮助下，我能够解决这个问题，但这并不是我想要的 100%，但对于我提出的问题，我想它适合。

看看这里。