使用CSS按比例调整img大小（警告：预设最大宽度/高度）-Java 学习之路

我有一个超大图像文件，所以我设置所需的最大宽度/高度（以像素为单位） . 现在我希望该图像在页面调整大小的同时缩小，同时保持纵横比 . （具体来说，在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高度时，这比上面/下面的大空白间隙更好 . 至少现在它不会替换我的文本（在上方/下方，而不是在图像周围） .

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

1 回答