将尺寸调整为特定尺寸，同时保持css中的宽高比

我正在将一堆照片加载到我的页面上，它们都是不同的尺寸。我需要将它们全部缩小到相同的尺寸*（即：x200px乘以y400px）_同时保持纵横比。将尺寸调整为特定尺寸，同时保持css中的宽高比

如何在纯CSS中做到这一点？

2014-04-01 uSeRnAmEhAhAhAhAhA

*不同尺寸*可能*不同的比率*，但你希望他们被向下缩放**到相同尺寸**并且它们的比率仍然保持不变？不可能。他们应该有相同的比例。 –

@KingKing我明白了。我很难说出我的意思。我的意思是，我知道它们不能都是相同的大小，我的意思是我想缩小它，啊，我无法解释它！你知道我现在的意思吗？嗯...好吧，如果我们有2张图片，其中一张非常长（在高度上），另一张非常宽，那么我希望真正宽的一张被缩放，以便它的宽度与我的最大宽度（200px）规则相匹配，而我想要真正长的匹配我的最大高度规则（400px）的高度， – uSeRnAmEhAhAhAhAhA

以下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/

来源

2014-04-01 02:21:52

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

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

来源

2014-04-01 02:26:29 barrigaj

我认为这是你在找什么区域：

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

Fiddle example here

来源

2014-04-01 02:29:25

将尺寸调整为特定尺寸，同时保持css中的宽高比

回答

相关问题