是否有相当于background-size：cover和contains for images元素？

时间：2012-07-26 13:55:21

标签： html css image css3

我有一个包含许多页面和不同背景图片的网站，我会从CSS中显示它们：

body.page-8 {
    background: url("../img/pic.jpg") no-repeat scroll center top #000;
    background-size: cover;
}

但是，我想使用<img>元素在一个页面上显示不同的（全屏）图片，我希望它们具有与上述background-image: cover;属性相同的属性（图像无法显示CSS，必须从HTML文档中显示。）

通常我会使用：

div.mydiv img {
    width: 100%;
}

或者：

div.mydiv img {
    width: auto;
}

使图片充实且反应灵敏。然而，当屏幕变得太窄时，图片会缩小太多（width: 100%），并在底部屏幕中显示正文的背景颜色。另一种方法width: auto;仅使图像成为完整大小，并且不响应屏幕大小。

有没有办法以background-size: cover的方式显示图像？

14 个答案:

答案 0 :(得分：303)

解决方案＃1 - object-fit property（Lacks IE support）

只需在img。

上设置object-fit: cover;即可 

body {
  margin: 0;
}
img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}
<img src="http://lorempixel.com/1500/1000" />

请参阅MDN - 关于object-fit: cover：

  

替换内容的大小可以保持其宽高比   填充元素的整个内容框。如果是对象的宽高比   与其框的纵横比不匹配，那么对象就是   夹住以适应。

此外，请参阅this Codepen demo，其中object-fit: cover将应用于background-size: cover的图片与应用于背景图片的body { margin: 0; } img { position: fixed; width: 0; height: 0; padding: 50vh 50vw; background: url(http://lorempixel.com/1500/1000/city/Dummy-Text) no-repeat; background-size: cover; }进行比较

解决方案＃2 - 用带有css

的背景图像替换img 

<img src="http://placehold.it/1500x1000" />
{{1}}

答案 1 :(得分：27)

实际上有一个非常简单的css solution甚至适用于IE8：

＆＃13;
＆＃13; 
.container {
  position: relative;
  overflow: hidden;
  /* Width and height can be anything. */
  width: 50vw;
  height: 50vh;
}

img {
  position: absolute;
  /* Position the image in the middle of its container. */
  top: -9999px;
  right: -9999px;
  bottom: -9999px;
  left: -9999px;
  margin: auto;
  /* The following values determine the exact image behaviour. */
  /* You can simulate background-size: cover/contain/etc.
     by changing between min/max/standard width/height values.
     These values simulate background-size: cover
  */
  min-width: 100%;
  min-height: 100%;
}
＆＃13; 
<div class="container">
    <img src="http://placehold.it/200x200" alt="" />
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：20)

假设你可以安排一个你希望填充的容器元素，这似乎有用，但感觉有点hackish。实质上，我只是在更大的区域使用min/max-width/height，然后将该区域缩放回原始尺寸。

.container {
  width: 800px;
  height: 300px;
  border: 1px solid black;
  overflow:hidden;
  position:relative;
}
.container.contain img {
  position: absolute;
  left:-10000%; right: -10000%; 
  top: -10000%; bottom: -10000%;
  margin: auto auto;
  max-width: 10%;
  max-height: 10%;
  -webkit-transform:scale(10);
  transform: scale(10);
}
.container.cover img {
  position: absolute;
  left:-10000%; right: -10000%; 
  top: -10000%; bottom: -10000%;
  margin: auto auto;
  min-width: 1000%;
  min-height: 1000%;
  -webkit-transform:scale(0.1);
  transform: scale(0.1);
}
<h1>contain</h1>
  <div class="container contain">
    <img 
       src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg" 
       />
    <!-- 366x200 -->
  </div>
  <h1>cover</h1>
  <div class="container cover">
    <img 
       src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg" 
       />
    <!-- 366x200 -->
  </div>

答案 3 :(得分：9)

否，你不能像background-size:cover 那样得到它，但是......

这种方法非常接近：它使用JavaScript来确定图像是横向还是纵向，并相应地应用样式。

JS 

 $('.myImages img').load(function(){
        var height = $(this).height();
        var width = $(this).width();
        console.log('widthandheight:',width,height);
        if(width>height){
            $(this).addClass('wide-img');
        }else{
            $(this).addClass('tall-img');
        }
    });

CSS 

.tall-img{
    margin-top:-50%;
    width:100%;
}
.wide-img{
    margin-left:-50%;
    height:100%;
}

http://jsfiddle.net/b3PbT/

答案 4 :(得分：6)

我找到了一个模拟覆盖和包含的简单解决方案，它是纯CSS，适用于具有动态尺寸的容器，并且对图像比例没有任何限制。

请注意，如果您不需要支持IE或16之前的Edge，则最好使用object-fit。

background-size：封面

.img-container {
  position: relative;
  overflow: hidden;
}

.background-image {
  position: absolute;
  min-width: 1000%;
  min-height: 1000%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) scale(0.1);
  z-index: -1;
}
<div class="img-container">
  <img class="background-image" src="https://picsum.photos/1024/768/?random">
  <p style="padding: 20px; color: white; text-shadow: 0 0 10px black">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

如果图像的自然尺寸大于显示的尺寸，则在此处使用1000％。例如，如果图像为500x500，但容器仅为200x200。使用此解决方案，图像将被调整为2000x2000（由于最小宽度/最小高度），然后缩小至200x200（由于transform: scale(0.1)）。

x10因子可以用x100或x1000代替，但是通常不理想的是在20x20 div上渲染2000x2000图像。 ：）

background-size：包含

遵循相同的原理，您也可以使用它来模拟background-size: contain： 

.img-container {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.background-image {
  position: absolute;
  max-width: 10%;
  max-height: 10%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) scale(10);
  z-index: -1;
}
<div style="background-color: black">
  <div class="img-container">
    <img class="background-image" src="https://picsum.photos/1024/768/?random">
    <p style="padding: 20px; color: white; text-shadow: 0 0 10px black">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>

答案 5 :(得分：2)

尝试使用min-height设置 min-width和display:block：

img {
    display:block;
    min-height:100%;
    min-width:100%;
}

（fiddle）

如果您的图片包含元素为position:relative或position:absolute，则图片将覆盖容器。但是，它不会居中。

如果您知道图像是水平溢出（设置margin-left:-50%）还是垂直设置（设置margin-top:-50%），则可以轻松居中。有可能使用CSS媒体查询（和一些数学）来解决这个问题。

答案 6 :(得分：2)

你可以做的是使用＆＃39; style＆＃39;属性将背景图像添加到元素，这样你仍然会在HTML中调用图像，但你仍然可以使用background-size：cover css behavior：

HTML：

    <div class="image-div" style="background-image:url(yourimage.jpg)">
    </div>

CSS：

    .image-div{
    background-size: cover;
    }

这就是我将background-size：cover行为添加到我需要动态加载到HTML中的元素的方法。然后，您可以使用像background-position：center这样的真棒css类。吊杆

答案 7 :(得分：2)

我需要模仿background-size: contain，但由于缺乏支持而无法使用object-fit。我的图像有定义尺寸的容器，最终为我工作：

.image-container {
  height: 200px;
  width: 200px;
  overflow: hidden;
  background-color: rebeccapurple;
  border: 1px solid yellow;
  position: relative;
}

.image {
  max-height: 100%;
  max-width: 100%;
  margin: auto;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
<!-- wide -->
<div class="image-container">
  <img class="image" src="http://placehold.it/300x100">
</div>

<!-- tall -->
<div class="image-container">
  <img class="image" src="http://placehold.it/100x300">
</div>

答案 8 :(得分：1)

使用CSS，您可以模拟object-fit: [cover|contain];。它使用transform和[max|min]-[width|height]。 这并不完美。在一种情况下不起作用：如果图像比容器更宽更短。

.img-ctr{
  background: red;/*visible only in contain mode*/
  border: 1px solid black;
  height: 300px;
  width: 600px;
  overflow: hidden;
  position: relative;
  display: block;
}
.img{
  display: block;

  /*contain:*/
  /*max-height: 100%;
  max-width: 100%;*/
  /*--*/

  /*cover (not work for images wider and shorter than the container):*/
  min-height: 100%;
  width: 100%;
  /*--*/

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<p>Large square:
<span class="img-ctr"><img class="img" src="http://placehold.it/1000x1000"></span>
</p>
<p>Small square:
<span class="img-ctr"><img class="img" src="http://placehold.it/100x100"></span>
</p>
<p>Large landscape:
<span class="img-ctr"><img class="img" src="http://placehold.it/2000x1000"></span>
</p>
<p>Small landscape:
<span class="img-ctr"><img class="img" src="http://placehold.it/200x100"></span>
</p>
<p>Large portrait:
<span class="img-ctr"><img class="img" src="http://placehold.it/1000x2000"></span>
</p>
<p>Small portrait:
<span class="img-ctr"><img class="img" src="http://placehold.it/100x200"></span>
</p>
<p>Ultra thin portrait:
<span class="img-ctr"><img class="img" src="http://placehold.it/200x1000"></span>
</p>
<p>Ultra wide landscape (images wider and shorter than the container):
<span class="img-ctr"><img class="img" src="http://placehold.it/1000x200"></span>
</p>

答案 9 :(得分：0)

对于IE，你还需要包括第二行 - 宽度：100％; 

.mydiv img {
    max-width: 100%;
    width: 100%;
}

答案 10 :(得分：0)

我不允许添加评论＆＃39;所以这样做，但是Eru Penkman所做的事情是非常重要的，要让它像背景一样，你需要做的就是改变

＆＃13;
＆＃13; 
.tall-img{
    margin-top:-50%;
    width:100%;
}
.wide-img{
    margin-left:-50%;
    height:100%;
}
＆＃13;
＆＃13;
＆＃13;

要

＆＃13;
＆＃13; 
.wide-img{
    margin-left:-42%;
    height:100%;
}
.tall-img{
    margin-top:-42%;
    width:100%;
}
＆＃13;
＆＃13;
＆＃13;

答案 11 :(得分：0)

我知道这是旧的，但是我上面看到的许多解决方案都存在图像/视频对于容器而言太大的问题，因此实际上不像背景大小的封面。但是，我决定制作“实用程序类”，以便它可以用于图像和视频。您只需为容器提供类.media-cover-wrapper，将媒体项本身设为类.media-cover

然后你有以下jQuery：

function adjustDimensions(item, minW, minH, maxW, maxH) {
  item.css({
  minWidth: minW,
  minHeight: minH,
  maxWidth: maxW,
  maxHeight: maxH
  });
} // end function adjustDimensions

function mediaCoverBounds() {
  var mediaCover = $('.media-cover');

  mediaCover.each(function() {
   adjustDimensions($(this), '', '', '', '');
   var mediaWrapper = $(this).parent();
   var mediaWrapperWidth = mediaWrapper.width();
   var mediaWrapperHeight = mediaWrapper.height();
   var mediaCoverWidth = $(this).width();
   var mediaCoverHeight = $(this).height();
   var maxCoverWidth;
   var maxCoverHeight;

   if (mediaCoverWidth > mediaWrapperWidth && mediaCoverHeight > mediaWrapperHeight) {

     if (mediaWrapperHeight/mediaWrapperWidth > mediaCoverHeight/mediaCoverWidth) {
       maxCoverWidth = '';
       maxCoverHeight = '100%';
     } else {
       maxCoverWidth = '100%';
       maxCoverHeight = '';
     } // end if

     adjustDimensions($(this), '', '', maxCoverWidth, maxCoverHeight);
   } else {
     adjustDimensions($(this), '100%', '100%', '', '');
   } // end if
 }); // end mediaCover.each
} // end function mediaCoverBounds

调用它时一定要注意页面调整大小：

mediaCoverBounds();

$(window).on('resize', function(){
  mediaCoverBounds();
});

然后是以下CSS：

.media-cover-wrapper {
  position: relative;
  overflow: hidden;
}

.media-cover-wrapper .media-cover {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

是的，它可能需要jQuery，但它反应很好，行为与背景大小完全相同：封面，你可以在图像和/或视频上使用它来获得额外的SEO值。

答案 12 :(得分：0)

我们可以采取ZOOM方法。如果高宽比图像高度或宽度小于所需高度或宽度，我们可以假设最大30％（或多达100％）可以是缩放效果。我们可以用overflow：hidden来隐藏其余不需要的区域。

.image-container {
  width: 200px;
  height: 150px;
  overflow: hidden;
}
.stage-image-gallery a img {
  max-height: 130%;
  max-width: 130%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

这将调整不同宽度或高度的图像。

答案 13 :(得分：-1)

background:url('/image/url/') right top scroll; 
background-size: auto 100%; 
min-height:100%;

遇到了同样的问题。以上为我工作。

相关问题
最新问题