约束图像大小的最大宽度和最大高度取决于首先是真实的

Question

尝试找出一种可以将肖像和风景图像调整为视口大小的方法，包括最大高度和最大宽度场景。

只要宽度不超过1050px，图像应保持100％宽度。另一个限制因素是图像的高度最多为800px。因此，首先应以“真实”为准，这应该会限制图像的大小。

如果我设置max-width: 1050px和max-height: 800px;，那么图像的宽高比就会混乱。 （如下面的演示所示）。还有一个问题是图像宽度将比实际图像宽（836px宽度的肖像图像将高档到1050px）。这可以用CSS控制吗？

Demo

Answer 1

您可以使用CSS3 viewport units来实现此目标，但actual browser support仍然有限。

Answer 2

在一位朋友的帮助下，我能够解决这个问题，但这并不是我所追求的100％，但对于我提出的问题，我认为这很合适。

看看HERE。