我有一张图片，我想给它设置一个特定的宽度和高度(像素)
但是如果我使用css (width:150px;高度:100px)，图像将被拉伸，并且它可能是丑陋的。
如何使用CSS填充图像到特定的大小，而不是拉伸它?
填充和拉伸图像示例:
原始图像:
拉伸图片:
填充图片:
请注意，在上面的填充图像示例中:首先，图像被调整为150x255(保持长宽比)，然后，它裁剪为150x100。
当前回答
基于@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();
其他回答
你可以通过“伸缩”显示来实现。对我来说!：
.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{
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;
}
唯一真正的方法是在你的图像周围有一个容器，并使用overflow:hidden:
HTML
<div class="container"><img src="ckk.jpg" /></div>
CSS
.container {
width: 300px;
height: 200px;
display: block;
position: relative;
overflow: hidden;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
这是一个痛苦的CSS做什么你想要和居中图像，有一个快速修复jquery，如:
var conHeight = $(".container").height();
var imgHeight = $(".container img").height();
var gap = (imgHeight - conHeight) / 2;
$(".container img").css("margin-top", -gap);
http://jsfiddle.net/x86Q7/2/
我觉得现在回答这个问题有点晚了。无论如何，希望这对将来的人们有所帮助。 我面临的问题，定位卡片的角度。有针对事件数组显示的卡片。如果事件的图像宽度对于卡片来说比较大，图像应该从两边裁剪，高度为100%来显示。如果图像高度较长，图像的底部被裁剪，宽度为100%。这是我的纯css解决方案:
HTML:
<span class="block clear img-card b-b b-light text-center" [ngStyle]="{'background-image' : 'url('+event.image+')'}"></span>
CSS
.img-card {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
width: 100%;
overflow: hidden;
}
<div class="container">
<img src="http://i.stack.imgur.com/2OrtT.jpg"/>
</div>
<style>
.container {
width: 150px;
height: 100px;
overflow: hidden;
}
</style>
