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

Question

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

只要宽度不超过1050px,图像应保持100%宽度.另一个限制因素是图像的高度最多为800px.因此,无论哪个是"真实的"首先应该限制图像的大小.

如果我设置max-width: 1050px并max-height: 800px;然后将图像的纵横比被弄乱了.(如下面的演示所示).还有一个问题是图像宽度将比实际图像宽(836px宽度的肖像图像将高档到1050px).这可以用CSS控制吗？

演示

Answer 1

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

看看这里。