Question

我正在将一堆照片加载到我的页面上，它们的大小各不相同。我需要将它们全部降低到相同的大小*（这是：x200px by y400px）_同时保持宽高比。

如何在纯CSS中执行此操作？

Answer 1

以下CSS类会将它们限制为您指定的大小。不同的纵横比可以具有较小的高度或宽度，但保持纵横比

.yourimage{

width:200px;
height:400px;
background-image: url("yourimage.png");
background-size: contain;
background-repeat:no-repeat; 
background-position: center ;



}

这里有一个小例子 http://jsfiddle.net/LgZtD/

Answer 2

CSS不能改变图像的大小，这不是它的用途。如果将图像插入宽度为200px且高度为40ppx的img标记，则会丢失宽高比。

你可以做的是使用CSS来显示200px x 400px元素，并将图像作为背景，然后使用background-size属性使图像覆盖200px x 400px空间。 CSS将找到覆盖该区域的最有效方法，而不会改变图像的大小

.image {
    width: 200px;
    height: 400px;
    background-image: url(/url/to/image);
    background-size: cover; //This will cover the area of the image
    background-position: center center; //Have the image centered
}

http://codepen.io/herihehe/full/aLwGt

这是你想要的一个很好的例子。看看包含和封面之间的区别。包含显示图像的实际大小。覆盖“覆盖”该区域

Answer 3

我认为这就是你要找的东西：

img {
    height: auto;
    width: auto;
    max-height: 400px;
    max-width: 200px;
}

Fiddle example here

调整大小到特定大小，同时保持css的宽高比

3 个答案: