通过css按比例改变图像大小

Question

我有一个宽度为227px，高度为250px的div。在该div中包含具有相同大小的图像。但是如果图像太长或太短，它会不成比例地改变尺寸，因此图像会扩大。我如何通过CSS解决这个问题？

谢谢！

Answer 1

如果要根据宽度进行设置

.picture
{
 width: 227px;
 height: auto;
 max-height: 250px;
}

OR为高度

.picture
{
 width: auto;
 height: 250px;
 max-width: 227px;
}

这不会影响宽高比。

有一个fiddle here

Answer 2

尝试以下方法：

div{
   background-image: url("yourpath.jpg");
   background-size: contain;
}

如果这不是您要找的，可能是background-size: cover;。