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

Question

试图找出一种方法，使纵向和横向图像能够根据最大高度和最大宽度场景调整视口(viewport)大小。

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

如果我设置 max-width: 1050px 和 max-height: 800px; 那么图像的宽高比就会乱七八糟。 (如下面的演示所示)。还有一个问题是图像宽度会比实际图像宽(836px 宽度的肖像图像将放大到 1050px)。这是否可以仅使用 CSS 进行控制？

Demo

Answer 1

您可以使用 CSS3 viewport units要做到这一点，虽然actual browser support还是有点局限。