294

我有一个包含许多页面和不同背景图片的网站，我从 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？

4

14 回答 14

474

解决方案 #1 - object-fit 属性（缺乏 IE 支持）

只需object-fit: cover;在 img 上设置。

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

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

被替换的内容在填充元素的整个内容框时调整大小以保持其纵横比。如果对象的纵横比与其框的纵横比不匹配，则对象将被裁剪以适应。

对于object-fit: contain：

被替换的内容被缩放以保持其纵横比，同时适合元素的内容框。整个对象被制作成填充盒子，同时保持其纵横比，因此如果其纵横比与框的纵横比不匹配，则该对象将被“信箱化”。

另外，请参阅此 Codepen 演示，该演示将object-fit: cover应用于图像与background-size: cover应用于背景图像进行比较

解决方案 #2 - 将 img 替换为带有 css 的背景图像

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;
}
<img src="http://placehold.it/1500x1000" />

于 2014-11-17T07:05:41.553 回答
33

假设您可以安排一个您希望填充的容器元素，这似乎可行，但感觉有点 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>

于 2015-02-27T18:30:20.553 回答
32

实际上有一个非常简单的CSS 解决方案，它甚至可以在 IE8 上运行：

.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%;
}
<div class="container">
    <img src="http://placehold.it/200x200" alt="" />
</div>

于 2015-06-11T10:54:05.823 回答
22

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

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

背景尺寸：封面

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

于 2018-08-23T12:05:57.923 回答
11

不，你不能完全理解，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/

于 2014-02-10T02:55:49.910 回答
3

您可以做的是使用 'style' 属性将背景图像添加到元素中，这样您仍然可以在 HTML 中调用图像，但您仍然可以使用 background-size: 覆盖 css 行为：

HTML：

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

CSS：

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

这就是我如何将 background-size:cover 行为添加到我需要动态加载到 HTML 中的元素。然后，您可以使用很棒的 CSS 类，例如 background-position: center。繁荣

于 2015-09-30T16:00:56.393 回答
3

我需要 emulate ，但由于缺乏支持而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>

于 2016-06-07T22:22:03.520 回答
2

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

于 2015-06-25T20:12:57.683 回答
2

我们可以采取ZOOM的方式。如果纵横比图像的高度或宽度小于所需的高度或宽度，我们可以假设最大 30%（或高达 100%）可以是缩放效果。我们可以使用溢出隐藏其余不需要的区域：隐藏。

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

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

于 2017-08-29T06:38:51.330 回答
1

尝试同时 min-height设置and min-width, with display:block:

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

（小提琴）

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

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

于 2013-11-06T01:20:52.050 回答
0

我不允许'添加评论'这样做，但是是的，Eru Penkman 所做的几乎是正确的，要让它像背景封面一样，你需要做的就是改变

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

到

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

于 2014-11-17T06:24:48.283 回答
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，但它的响应非常好，并且行为与 background-size:cover 完全一样，您可以在图像和/或视频上使用它来获得额外的 SEO 价值。

于 2017-04-11T21:03:31.723 回答
-1

对于 IE6，您还需要包括第二行 - width: 100%;

.mydiv img {
    max-width: 100%;
    width: 100%;
}
于 2013-06-21T15:11:58.360 回答
-2 
background:url('/image/url/') right top scroll; 
background-size: auto 100%; 
min-height:100%;

遇到相同的确切症状。以上对我有用。

于 2013-11-06T00:42:11.117 回答