CSS图像大小，如何填充而不是拉伸？

我有一张图片，我想将其设置为特定的宽度和高度（以像素为单位）

但是，如果我使用css（width:150px; height:100px）设置宽度和高度，则图像将被拉伸，并且可能很难看。

如何使用CSS 将图像填充到特定大小，而不进行拉伸？

填充和拉伸图像示例：

原始图片：

拉伸图像：

填充图片：

请注意，在上面的“填充图像”示例中：首先，将图像调整为150x255（保持纵横比），然后将其裁剪为150x100。

如果要将图像用作CSS背景，则有一个不错的解决方案。只需在CSS3属性中使用cover或。containbackground-size

.container {
  width: 150px;
  height: 100px;
  background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

<div class="container"></div>​

虽然cover会给您放大的图像，但contain会给您缩小的图像。两者都将保留像素长宽比。

http://jsfiddle.net/uTHqs/（使用封面）

http://jsfiddle.net/HZ2FT/（使用包含）

根据Thomas Fuchs的快速指南，此方法的优点是对Retina显示器友好。

值得一提的是，浏览器对这两个属性的支持均不包括IE6-8。

您可以使用css属性object-fit。

.cover {
  object-fit: cover;
  width: 50px;
  height: 100px;
}

<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />

在这里查看示例

IE有一个polyfill：https : //github.com/anselmh/object-fit

增强对通过@afonsoduarte以上回答 （不是已接受的）。
如果您正在使用引导程序

1. 提供width:100%样式。
   如果您正在使用引导程序，并且希望图像拉伸所有可用宽度，这将很有帮助。
   

2. 指定height属性是可选的，您可以根据需要删除/保留它

   .cover {
      object-fit: cover;
      width: 100%;
      /*height: 300px;  optional, you can remove it, but in my case it was good */
   }

3. 顺便说一下，不需要在元素上提供height和width属性，image因为它们会被样式覆盖。
   所以写这样的东西就足够了。

   <img class="cover" src="url to img ..."  />

唯一的真实方法是在图像周围使用一个容器并使用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/

CSS解决方案没有JS，也没有背景图片：

方法1“保证金自动”（IE8 +-NOT FF！）：

div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}
div img{
  position:absolute; 
  top:0; 
  bottom:0; 
  margin: auto;
  width:100%;
}

<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>

http://jsfiddle.net/5xjr05dt/

方法2“转换”（IE9 +）：

div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}

div img{
  position:absolute; 
  width:100%;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

<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>

http://jsfiddle.net/5xjr05dt/1/

方法2可用于将图像居中在固定宽度/高度的容器中。两者都可能溢出-如果图像小于容器，它将仍然居中。

http://jsfiddle.net/5xjr05dt/3/

方法3“双重包装”（IE8 +-NOT FF！）：

.outer{
  width:150px; 
  height:100px; 
  margin: 200px auto; /* just for example */
  border: 1px solid red; /* just for example */
  /* overflow: hidden;	*/ /* TURN THIS ON */
  position: relative;
}
.inner { 
    border: 1px solid green; /* just for example */
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    display: table;
    left: 50%;
}
.inner img {
    display: block;
    border: 1px solid blue; /* just for example */
    position: relative;
    right: 50%;
    opacity: .5; /* just for example */
}

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

http://jsfiddle.net/5xjr05dt/5/

方法4“双重包装和双重图像”（IE8 +）：

.outer{
  width:150px; 
  height:100px; 
  margin: 200px auto; /* just for example */
  border: 1px solid red; /* just for example */
  /* overflow: hidden;	*/ /* TURN THIS ON */
  position: relative;
}
.inner { 
    border: 1px solid green; /* just for example */
    position: absolute;
    top: 50%;
    bottom: 0;
    display: table;
    left: 50%;
}
.inner .real_image {
    display: block;
    border: 1px solid blue; /* just for example */
    position: absolute;
    bottom: 50%;
    right: 50%;
    opacity: .5; /* just for example */
}

.inner .placeholder_image{
  opacity: 0.1; /* should be 0 */
}

<div class="outer">
  <div class="inner">
    <img class="real_image" src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
    <img class="placeholder_image"  src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
  </div>
</div>

http://jsfiddle.net/5xjr05dt/26/

• 方法1具有更好的支持-您必须设置图像的宽度或高度！
• 使用前缀方法2还具有不错的支持（从ie9起）-方法2在Opera mini上不支持！
• 方法3使用两个包装器-可以溢出宽度和高度。
• 方法4使用双重映像（一个作为占位符），这会带来一些额外的带宽开销，但会更好地支持跨浏览器。

方法1和3似乎不适用于Firefox

另一种解决方案是将图像放入具有所需宽度和高度的容器中。使用此方法，您不必将图像设置为元素的背景图像。

然后，您可以使用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/

在使用jQuery构建@Dominic Green的答案的基础上，这是一种解决方案，该解决方案应该适用于宽度大于高度或大于高度的图像。

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();

• 不使用CSS背景
• 仅1格即可裁剪
• 调整为最小宽度，而不是保持正确的宽高比
• 从中心裁剪（垂直和水平裁剪，您可以使用顶部，水平和变换进行调整）

如果您使用主题或其他内容，请务必小心，它们通常会声明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%);
}

我帮助构建了一个名为Fillmore的jQuery插件，该插件可处理background-size: cover支持该插件的in浏览器，并为不支持该插件的人提供填充。看看吧！

我认为这个答案已经很晚了。无论如何希望这会在将来对某人有所帮助。我遇到了将卡倾斜放置的问题。显示有用于事件数组的卡片。如果事件的图像宽度对于卡来说较大，则应通过从两侧裁剪并以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;
}

尝试这样的事情：http : //jsfiddle.net/D7E3E/4/

使用带有溢出的容器：隐藏

编辑：@Dominic Green击败了我。

这会将图像填充到特定大小，而无需拉伸或裁剪

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;
}

要使图像全屏显示，请尝试以下操作：

背景重复：圆形；

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

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