6

我有一堆不同（未知）尺寸的图像。

我想将这些图像放入一个 div 并让它们自动符合 div 的尺寸，同时保持它们的纵横比。

换句话说，如果图像宽于高，则宽度将是 100%，并且高度将相应缩放。如果图像高于宽度，高度将为 100%，宽度将相应缩放。

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

谢谢

4

4 回答 4

10

使用 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;
}
于 2013-03-20T15:40:03.630 回答
2

我用我的画廊设置做到这一点：

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

img 基于此缩放以适应其父/容器的尺寸，同时保持其纵横比。除了imgs，我没有尝试过这个，但对我来说效果很好。不需要width或height需要声明。

于 2013-03-20T15:37:44.360 回答
0

尝试这个：

<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>
于 2013-03-20T15:37:51.777 回答
0

基于@iambriansreed fiddle，
当图像小于容器时使用缩放

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

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

于 2017-01-11T14:06:09.083 回答