我有一张图片,我想给它设置一个特定的宽度和高度(像素)

但是如果我使用css (width:150px;高度:100px),图像将被拉伸,并且它可能是丑陋的。

如何使用CSS填充图像到特定的大小,而不是拉伸它?

填充和拉伸图像示例:

原始图像:

拉伸图片:

填充图片:

请注意,在上面的填充图像示例中:首先,图像被调整为150x255(保持长宽比),然后,它裁剪为150x100。


当前回答

<div class="container">
     <img src="http://i.stack.imgur.com/2OrtT.jpg"/>
</div>

<style>
.container {
       width: 150px;
       height: 100px;
       overflow: hidden;
}
</style>

其他回答

我帮助构建了一个名为Fillmore的jQuery插件,它在支持它的浏览器中处理背景大小:封面,并为那些不支持它的浏览器提供了一个垫片。看看吧!

在阅读StackOverflow的答案后,我得到的简单解决方案是

.profilePosts div {

background: url("xyz");
background-size: contain;
background-repeat: no-repeat;
width: x;
height: y;

}

我觉得现在回答这个问题有点晚了。无论如何,希望这对将来的人们有所帮助。 我面临的问题,定位卡片的角度。有针对事件数组显示的卡片。如果事件的图像宽度对于卡片来说比较大,图像应该从两边裁剪,高度为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;
}

不使用css背景 只有1个div剪辑它 调整到最小宽度,保持正确的纵横比 从中心裁剪(垂直和水平,你可以调整顶部,左&变换)

如果你使用主题之类的,要小心,他们通常会声明img max-width为100%。你必须一个都不做。测试一下吧!

https://jsfiddle.net/o63u8sh4/

<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

<p>Wrapped:</p>
<div>
    <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>


div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}
div img{
  min-width:100%;
  min-height:100%;
  height:auto;
  position:relative;
  top:50%;
  left:50%;
  transform:translateY(-50%) translateX(-50%);
}

基于@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();