如何在CSS中保持图片纵横比的情况下调整图片大小？

Question

我有一张很大的图片。我想在一个网页上单独显示它，但是如果不使用CSS，它会占满整个页面，并且过大以至于无法完整显示（会出现滚动条）。我希望将其缩小到适应用户屏幕的高度（而非宽度）。我已经找到了解决方案，但这些方案会将图像拉伸以适合整个屏幕--我不想这样做，因为它会破坏图像的纵横比。

基本上，我想要调整图片大小同时保持其纵横比。我该如何做到这一点？

- user1447941

---

http://stackoverflow.com/questions/10559058/resize-view-width-preserve-image-aspect-ratio-with-css - 001

只需指定高度，将宽度属性保持不变。 - knittl

这是一个已经有解决方案的重复话题。https://dev59.com/OnA75IYBdhLWcg3w7tx6 - Hernan Gil

Answer 1

只需将width设置为auto:

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

这里是示例代码: http://jsfiddle.net/6Y5Zp/

- Joseph Silber

---

如何根据图像的大小自动调整高度以适应最佳纵横比？ - user1447941

如果您想调整宽度：宽度：100％和高度：自动。 - speeder

这是最简单的解决方案，但它有一个限制：它需要将图像缩放到固定的宽度或高度。这将始终导致一个正确缩放的图像，但其中一个维度可能会被截断。@Hoffman的答案似乎可以避免这种情况。 - Tim Biegeleisen

目前我无法在代码编辑器中看到图像适应高度。实际上，该图片被放置在页面中而没有进行任何缩放。但是，为容器（在这种情况下是 body）提供固定的高度可以解决问题。这里是修改后的代码：http://jsfiddle.net/diamondex/v49dc3fe/1/ - Ruslan Zhomir

Answer 2

这是一个示例

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>

- AKHIL P

---

这是最简单的解决方案，但请注意，IE不支持object-fit属性。 - cytsunny

显然，甚至IE 11或Edge 15也不支持此功能：http://caniuse.com/#feat=object-fit - Grav

Answer 3

您可以使用带有background-image属性的div，并设置background-size: contain：

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。

- Hoffmann

Answer 4

我觉得你需要像这样将一个类粘贴到你想展示的图片中

< image  class="image" >  

这是类

.image 


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

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

或者你可以调整宽度和高度。

- jose