使用CSS按比例调整img的大小(注意:预设最大宽度/高度)

Question

我有一个过大的图像文件，所以我以像素为单位设置了所需的最大宽度/高度。现在，我希望该图像随着页面大小的调整而缩小，同时保持纵横比。(特别是在Chrome浏览器中，如果相关的话。)

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

我一辈子都做不到。我试着设置最大高度。

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>

我使用你的图片做了一些更改，我认为这是像你描述的那样调整大小。