如何在CSS中将图片调整为容器大小并保持宽高比？

Question

我有多张不同（未知）尺寸的图片。

我想将这些图片放入一个 div 中，并使它们自动适应 div 的尺寸，同时保持它们的纵横比例。

换句话说，如果图像比较宽，宽度将为 100%，高度会相应缩放。如果图像比较高，高度将为 100%，宽度会相应缩放。

是否有一种纯 CSS 的方法实现此功能？

谢谢。

- user1031947

Answer 1

使用CSS属性max-width和max-height可使图像达到所需体积。

Fiddle

http://fiddle.jshell.net/sHAQ9/

HTML

<div>    
    <img src="http://dummyimage.com/200x300/000000/ffffff.png&text=tall%20image"/>
</div>
<div>    
    <img src="http://dummyimage.com/300x200/000000/ffffff.png&text=wide%20image"/>
</div>

CSS

->

CSS

div {
    width: 150px;
    height: 150px;    
    overflow: hidden;
    background: #ccc;
    margin: 10px;
    text-align: center;
    line-height: 150px;
}
div img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

- iambriansreed

---

这在图像在某一个轴上达到其真实尺寸的100％之前起作用。有没有一种方法可以将其大小调整超过100％？ - user1031947

当我增加div的大小时，它不起作用。请参见链接。是否有任何解决方案可以将其拉伸以适应宽度或高度？ - hemkaran_raghav

Answer 2

我用我的图库设置来完成这个操作：

.ScaledImg {
    max-width:100%:
    max-height:100%;
}

根据父元素/容器的尺寸进行缩放，同时保持其宽高比。我只在 上试过这个方法，但对我来说效果很好。不需要声明 width 或 height。

- PlantTheIdea

Answer 3

试试这个：

<style>
    .fit_image img {
        max-width: 100%;
        max-height: 100%;
    }
    .fit_image {
        width: 400px;
        height: 200px;
    }
</style>

<div class="fit_image">
     <img src="/path/to/image.jpg">
</div>

- imkost

Answer 4

基于 @iambriansreed 的代码片段，
当图像小于容器时，使用缩放功能

div img {
    zoom: 10;
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

http://fiddle.jshell.net/vcapr0k8/

- unloco