Question

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

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

如何使用CSS 填充图片到特定尺寸，不拉伸呢？

填充和拉伸图像的示例：

原始图片：

Original

拉伸图片：

Stretched

填充图片：

Filled

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

Answer 1

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

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

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

See example here

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

Answer 2

如果您想将图像用作CSS背景，那么就有一个优雅的解决方案。只需在cover CSS3属性中使用contain或background-size。

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

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

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

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

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

根据Thomas Fuchs' quick guide.

，这种方法具有对Retina显示友好的优点

值得一提的是，浏览器支持两种属性excludes IE6-8.

Answer 3

唯一真正的方法是在图片周围放置一个容器并使用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%;
}

要做你想做的事情并使图像居中，这是一件很痛苦的事情，在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/

Answer 4

实际上，这只是大多数upvoted answer of this question （不已接受的）的推导。

有三点不同：

无需在height元素上提供width和image属性，因为它们将被样式覆盖。
所以写这样的东西就足够了。
```
<img class="cover" src="url to img ..."  />
```
在样式上提供width:100%。
如果您使用 bootstrap 并希望图像拉伸所有可用宽度，这将非常有用。

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

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

Answer 5

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

方法1“保证金自动”（IE8 + - 非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

Answer 6

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

然后您可以使用img标记执行此操作，并在元素上设置最大宽度和最大高度。

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/

Answer 7

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

Answer 8

我帮助构建了一个名为Fillmore的jQuery插件，该插件在支持它的浏览器中处理background-size: cover，并为那些不支持它的浏览器提供垫片。看看吧！

Answer 9

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

使用带溢出的容器：隐藏

编辑：@Dominic Green打败了我。

Answer 10

这会将图像填充到特定尺寸，而不会拉伸或不裁剪

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

Answer 11

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

Answer 12

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

.profilePosts div {

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

}

Answer 13

不使用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%);
}

Answer 14

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

背景重复：圆形；

Answer 15

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

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

Answer 16

据我所知，有一个插件可以简化这一过程。

jQuery Plugin: Auto transform <img> into background style

<img class="fill" src="image.jpg" alt="Fill Image"></img>

<script>
    $("img.fill").img2bg();
</script>

此外，这种方式还满足了可访问性需求。由于此插件不会将您的标记从代码中删除，因此屏幕阅读器仍会告诉您ALT文本，而不是跳过它。

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

16 个答案: