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


CSS Image size, how to fill, not stretch?

我有一个图像，我想设置一个特定的宽度和高度(以像素为单位)

但如果我使用css(width:150px; height:100px)设置宽度和高度，图像将被拉伸，它可能是丑陋的。

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

填充和拉伸图像的示例：

原始图片：

Original

拉伸图像：

Stretched

填充图片：

Filled

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

相关讨论

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

1
2
3
4
5
6
7
<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />

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

见这里的例子

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

相关讨论

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

1
2
3
4
5
6
7
8
9
10
?

.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的快速指南，这种方法具有对Retina显示器友好的优点。

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

相关讨论

唯一真正的方法是在图像周围放置一个容器并使用overflow:hidden：

HTML

1
<img src="ckk.jpg" />

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.container {
    width: 300px;
    height: 200px;
    display: block;
    position: relative;
    overflow: hidden;
}

.container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

要做你想做的事情并使图像居中，这是一个很痛苦的CSS，jquery中有一个快速解决方法，例如：

1
2
3
4
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/

相关讨论

加强对这个问题的最热烈回答(不是被接受的答案)。

如果你使用bootstrap

有三点不同：

  • 在样式上提供width:100%。
    如果您使用自举并希望图像拉伸所有可用宽度，这将非常有用。

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

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

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

    1
    <img class="cover" src="url to img ..."  />
    • 相关讨论

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

    方法1"自动保证金"(IE8 + - NOT FF！)：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    div{
      width:150px;
      height:100px;
      position:relative;
      overflow:hidden;
    }
    div img{
      position:absolute;
      top:0;
      bottom:0;
      margin: auto;
      width:100%;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <p>
    Original:
    </p>
    <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

    <p>
    Wrapped:
    </p>

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

    http://jsfiddle.net/5xjr05dt/

    方法2"转换"(IE9 +)：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    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%);
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <p>
    Original:
    </p>
    <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

    <p>
    Wrapped:
    </p>

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

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

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

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

    方法3"双包装"(IE8 + - NOT FF！)：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    .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 */
    }
    1
         <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

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

    方法4"双包装和双重图像"(IE8 +)：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    .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 */
    }
    1
    2
        <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"/>

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

    • 方法1有更好的支持 - 您必须设置图像的宽度或高度！
    • 使用前缀方法2也有不错的支持(从ie9开始) - 方法2不支持Opera mini！
    • 方法3使用两个包装 - 可以溢出宽度和高度。
    • 方法4使用双图像(一个作为占位符)，这提供了一些额外的带宽开销，但更好的跨浏览器支持。

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

    相关讨论

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

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

    CSS：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .imgContainer {
        display: block;
        width: 150px;
        height: 100px;
    }

    .imgContainer img {
        max-width: 100%;
        max-height: 100%;
    }

    HTML：

    1
        <img src='imagesrc.jpg' />

    现在，当您更改容器的大小时，图像将自动增大到尽可能大，而不会超出边界或扭曲。

    如果要垂直和水平居中图像，可以将容器css更改为：

    1
    2
    3
    4
    5
    6
    7
    .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，但这确实有效。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    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();

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

    我觉得这个答案已经很晚了。无论如何希望这将有助于未来的人。
    我遇到了将卡片定位成角度的问题。显示了一系列事件的卡片。如果事件的图像宽度对于卡很大，则应通过从两侧裁剪100％的高度来显示图像。如果图像高度较长，则会裁剪图像的底部，宽度为100％。这是我的纯css解决方案：

    enter image description here

    HTML：

    1
     <span class="block clear img-card b-b b-light text-center" [ngStyle]="{'background-image' : 'url('+event.image+')'}"></span>

    CSS

    1
    2
    3
    4
    5
    6
    7
    .img-card {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    width: 100%;
    overflow: hidden;
    }
    相关讨论

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

    1
    2
    3
    4
    5
    6
    7
    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;
    }

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

    使用溢出的容器：隐藏

    编辑：@Dominic Green打败了我。

    相关讨论

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

    如果你使用主题或其他东西要小心，他们通常会宣称img max-width为100％。你必须没有。测试出来:)

    https://jsfiddle.net/o63u8sh4/

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <p>
    Original:
    </p>
    <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

    <p>
    Wrapped:
    </p>

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



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