我有一张图片，我想给它设置一个特定的宽度和高度(像素)
但是如果我使用css (width:150px;高度:100px)，图像将被拉伸，并且它可能是丑陋的。
如何使用CSS填充图像到特定的大小，而不是拉伸它?
填充和拉伸图像示例:
原始图像:
拉伸图片:
填充图片:
请注意，在上面的填充图像示例中:首先，图像被调整为150x255(保持长宽比)，然后，它裁剪为150x100。
当前回答
你可以使用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(指定元素内容在其框内的对齐方式)。
其他回答
我帮助构建了一个名为Fillmore的jQuery插件，它在支持它的浏览器中处理背景大小:封面，并为那些不支持它的浏览器提供了一个垫片。看看吧!
据我所知，有一个插件可以让这变得简单。
jQuery插件:自动转换<img>为背景样式
<img class="fill" src="image.jpg" alt="Fill Image"></img>
<script>
$("img.fill").img2bg();
</script>
此外，这种方式也满足了可达性需求。因为这个插件不会从你的代码中删除你的<img>标签，屏幕阅读器仍然会告诉你ALT文本，而不是跳过它。
基于@Dominic Green使用jQuery的回答，这里有一个解决方案，应该适用于图像宽度大于它们的高度或高于它们的宽度。
http://jsfiddle.net/grZLR/4/
可能有一种更优雅的方式来处理JavaScript，但这确实有效。
function myTest() {
var imgH = $("#my-img").height();
var imgW = $("#my-img").width();
if(imgW > imgH) {
$(".container img").css("height", "100%");
var conWidth = $(".container").width();
var imgWidth = $(".container img").width();
var gap = (imgWidth - conWidth)/2;
$(".container img").css("margin-left", -gap);
} else {
$(".container img").css("width", "100%");
var conHeight = $(".container").height();
var imgHeight = $(".container img").height();
var gap = (imgHeight - conHeight)/2;
$(".container img").css("margin-top", -gap);
}
}
myTest();
这将填充图像到特定的大小，而不拉伸或裁剪它
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;
}
你必须在CSS中使用background-size: cover
JS代码
<div>
<div className={styles.banner}>banner</div>
</div>
css代码
.banner{
background:
url("./images/home-bg.jpg");
background-size: cover;
height: 53rem;
width: 100%;
}
对象匹配不工作 Background-size: contains也不工作
