使用CSS按比例调整img大小（警告：预设最大宽度/高度）

Question

我有一个超大的图像文件，所以我设置了所需的最大宽度/高度（以像素为单位）。 现在我希望该图像在页面调整大小的同时缩小，同时保持纵横比。 （具体来说，在Chrome浏览器中，如果相关的话。）

<img style="max-width: 700px" src="http://static.photocdn.pt/images/articles/2017/04/28/iStock-516651882.jpg">

我不能为我的生活让这个工作。我尝试设置max-height。

img {
max-height: 100vh;
}

但是虽然它可以很好地垂直调整大小，但它不会水平调整大小。如果屏幕太窄，它会溢出到右边。

更新：

好的，我提出的最好的是：

<img style="width: 700px" src="http://static.photocdn.pt/images/articles/2017/04/28/iStock-516651882.jpg">

和CSS：

img {
max-height: 100vh;
max-width 100%;
object-fit:scale-down;
}

它有效，它可以两种方式缩放......当图像缩小时，它有时会在图像和侧边框之间留下巨大的空白区域。但是我认为当你设置img高度时，这比上面/下面的大空白间隙更好。至少现在它不会替换我的文本（在上方/下方，而不是在图像周围）。

只有真正的解决方案似乎是没有国界。在美学上并不是很好，但我可能不得不认为它“足够好”，除非有人有更好的答案吗？

Answer 1

这适用于一般情况。它不会超过最大值，但会适当调整大小。

<div style="max-width: 700px">
 <img style="height: auto; width: 100%"  
  src="http://static.photocdn.pt/images/articles/2017/04/28/iStock-516651882.jpg">
</div>

我使用您的图片进行了一些更改，我认为这会像您描述的那样调整大小。