在保持CSS的宽高比的同时将图像大小调整为容器？

Question

我有一堆不同(未知)尺寸的图像.

我想将这些图像放入div中,并使它们自动符合div的尺寸,同时保持它们的纵横比.

换句话说,如果图像宽于高,则宽度将为100%,并且高度将相应地缩放.如果图像高于宽度,则高度将为100%,宽度将相应缩放.

在纯CSS中有没有办法做到这一点？

谢谢

Answer 1

使用CSS属性max-width，并max-height在那里你需要在图像上会得到你。

小提琴

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

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;
}