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

Answer 2

我使用我的图库设置执行此操作：

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

img根据此尺寸调整以适合其父/容器的尺寸，同时保持其纵横比。除了imgs之外，我还没有尝试过这个，但对我来说效果很好。不需要width或height声明。

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>

Answer 4

基于@iambriansreed小提琴，
当图像小于容器

时，请使用缩放图像

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

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

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

4 个答案: