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

【问题标题】：Constraining image size with max-width and max-height depending on which is true first使用 max-width 和 max-height 约束图像大小，具体取决于哪个是真的
【发布时间】：2013-09-26 18:51:49
【问题描述】：

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

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

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

Demo

【问题讨论】：

标签： aspect-ratio css

【解决方案1】：

您可以使用 CSS3 viewport units 来实现这一点，尽管 actual browser support 仍然有点受限。

【讨论】：

可能是个好主意，但我认为在这种情况下浏览器支持太有限了..

【解决方案2】：

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

看看HERE。

【讨论】：