如何在保持 CSS 中的纵横比的同时调整图像大小？答案

【问题标题】：How do I resize an image while keeping the aspect ratio in CSS?如何在保持 CSS 中的纵横比的同时调整图像大小？
【发布时间】：2012-09-01 11:51:29
【问题描述】：

我有一张大图。我想在自己的网页上显示它，并且在没有任何 CSS 的情况下执行此操作时，它会填满整个页面并且太大而无法立即显示（出现滚动条）。我想缩小它，使其适合用户屏幕的高度（而不是宽度）。我找到了解决方案，但这些方法会将图像拉伸以适合整个屏幕——我不希望这样，因为它会破坏纵横比。

基本上，我想在保持纵横比的同时调整图像大小。我该怎么做？

【问题讨论】：

stackoverflow.com/questions/10559058/…
只需指定高度并保持宽度属性不变。
这是一个重复的话题，已经有了解决方案。 stackoverflow.com/questions/3029422/…

标签： html css image

【解决方案1】：

只需将width 设置为auto：

img {
   width: auto;
   max-height: 100%;
}

这是小提琴：http://jsfiddle.net/6Y5Zp/

【讨论】：

如何根据图像大小自动调整高度以适应最佳纵横比？
如果你想调整宽度：宽度：100% 高度：自动
这是最简单的解决方案，但它有一个限制：它需要将图像缩放到固定宽度或固定高度。这将始终产生正确缩放的图像，但其中一个维度可能包含被截断的内容。 @Hoffman 的回答似乎可以避免这种情况。
目前我看不到该图像适合小提琴中的高度。实际上它是按原样放置到页面上的，没有任何缩放。但是为容器提供固定高度（在这种情况下为body）解决了这个问题。这是修改过的小提琴：http://jsfiddle.net/diamondex/v49dc3fe/1/

【解决方案2】：

您可以使用带有背景图像的 div 并设置背景大小：包含：

div.image{
    background-image: url("your/url/here");
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
}

现在您可以将 div 大小设置为您想要的任何大小，并且图像不仅可以保持其纵横比，而且还可以垂直和水平集中。只是不要忘记在 css 上设置大小，因为 div 在标签本身上没有宽度/高度属性。

但 background-size 属性是 ie>=9 而已。

【讨论】：

【解决方案3】：

我认为您需要在要显示的图像中粘贴一个类

< image  class="image" >

这就是类

.image 


 text align: center
 max width:pixels you want
 max height pixels you want

但要确保两者的数量相同这样在高度和宽度上都不会超出屏幕。

或者你可以用宽度和高度来玩

【讨论】：

【解决方案4】：

这是一个示例

div{
   width: 200px;
   height:200px;
   border:solid
 }

img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    }

<div>
  <img src="https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png">
</div>

【讨论】：

这是最简单的解决方案，但请注意 IE 不支持 object-fit 属性。
显然连 IE 11 或 Edge 15 都不支持这个：caniuse.com/#feat=object-fit