我有一张图片，我想给它设置一个特定的宽度和高度(像素)
但是如果我使用css (width:150px;高度:100px)，图像将被拉伸，并且它可能是丑陋的。
如何使用CSS填充图像到特定的大小，而不是拉伸它?
填充和拉伸图像示例:
原始图像:
拉伸图片:
填充图片:
请注意，在上面的填充图像示例中:首先，图像被调整为150x255(保持长宽比)，然后，它裁剪为150x100。
当前回答
在阅读StackOverflow的答案后，我得到的简单解决方案是
.profilePosts div {
background: url("xyz");
background-size: contain;
background-repeat: no-repeat;
width: x;
height: y;
}
其他回答
为了适应图像在全屏试试这个:
平铺方式:圆形;
如果您想使用图像作为CSS背景，有一个优雅的解决方案。只需在背景大小CSS3属性中使用cover或include即可。
.container { 宽度:150 px; 身高:100 px; 背景图片:url(“http://i.stack.imgur.com/2OrtT.jpg”); background-size:封面; 平铺方式:不再重演; 背景位置:50% 50%; ｝ < div class = "容器" > < / div >
封面会给你一个放大的图像，包含会给你一个缩小的图像。两者都将保留像素长宽比。
http://jsfiddle.net/uTHqs/(使用封面)
http://jsfiddle.net/HZ2FT/(使用contains)
根据Thomas Fuchs的快速指南，这种方法的优点是对Retina显示器友好。
值得一提的是，浏览器对这两个属性的支持不包括IE6-8。
你可以通过“伸缩”显示来实现。对我来说!：
.avatar-img { display: flex; justify-content: center; align-items: stretch; border-radius: 50%; border: 1px solid #dee2e6; height: 5.5rem; width: 5.5rem; overflow: hidden; } .avatar-img > img { flex-grow: 1; object-fit: cover; } <div> <div class="avatar-img"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqczw3Fb_TYsj0hbPEy0u7Ay2bVq1KurD6hw&usqp=CAU" alt="Test!'s profile photo"> </div> <div class="avatar-img"> <img src="https://i.pinimg.com/236x/a1/37/09/a137098873af3bf6180dd24cbe388ae9--flower-iphone-wallpaper-wallpapers-flowers.jpg" alt="Test!'s profile photo"> </div> </div>
解决方案不需要图像作为背景，将自动调整大小而不被切断或扭曲。
另一种解决方案是将图像放在具有所需宽度和高度的容器中。使用此方法，您不必将图像设置为元素的背景图像。
然后你可以用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/
你必须在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也不工作
