我有一张图片，我想给它设置一个特定的宽度和高度(像素)
但是如果我使用css (width:150px;高度:100px)，图像将被拉伸，并且它可能是丑陋的。
如何使用CSS填充图像到特定的大小，而不是拉伸它?
填充和拉伸图像示例:
原始图像:
拉伸图片:
填充图片:
请注意，在上面的填充图像示例中:首先，图像被调整为150x255(保持长宽比)，然后，它裁剪为150x100。
当前回答
这将填充图像到特定的大小，而不拉伸或裁剪它
img{
width:150px; //your requirement size
height:100px; //your requirement size
/*Scale down will take the necessary specified space that is 150px x 100px without stretching the image*/
object-fit:scale-down;
}
其他回答
解决方案不需要图像作为背景，将自动调整大小而不被切断或扭曲。
另一种解决方案是将图像放在具有所需宽度和高度的容器中。使用此方法，您不必将图像设置为元素的背景图像。
然后你可以用img标签来做这件事，只需要在元素上设置max-width和max-height。
CSS:
.imgContainer {
display: block;
width: 150px;
height: 100px;
}
.imgContainer img {
max-width: 100%;
max-height: 100%;
}
HTML:
<div class='imgContainer'>
<img src='imagesrc.jpg' />
</div>
现在，当你改变容器的大小时，图像将自动增长到最大，而不会超出边界或扭曲。
如果你想让图像垂直和水平居中，你可以改变容器css为:
.imgContainer {
display: table-cell;
width: 150px;
height: 100px;
text-align: center;
vertical-align: middle;
}
这是一个JS小提琴http://jsfiddle.net/9kUYC/2/
在阅读StackOverflow的答案后，我得到的简单解决方案是
.profilePosts div {
background: url("xyz");
background-size: contain;
background-repeat: no-repeat;
width: x;
height: y;
}
我帮助构建了一个名为Fillmore的jQuery插件，它在支持它的浏览器中处理背景大小:封面，并为那些不支持它的浏览器提供了一个垫片。看看吧!
试试这个:http://jsfiddle.net/D7E3E/4/
使用溢出容器:隐藏
编辑:@多米尼克·格林打败了我。
你可以使用css属性object-fit。(“设置替换元素的内容，如<img>或<video>，应该如何调整大小以适应其容器。”)
.cover { object-fit:封面; 宽度:50 px; 身高:100 px; ｝ <img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />
参见这里的例子
IE有一个polyfill: https://github.com/anselmh/object-fit
相关:object-position(指定元素内容在其框内的对齐方式)。
