是否有相当于background-size的尺寸：cover和contains的图像元素？

240

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

html image css

— 暴风雨
source

好问题。

— wonsuc

380

解决方案＃1- 对象适合属性（缺少IE支持）

只需object-fit: cover;在img上进行设置即可。

body {
  margin: 0;
}
img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

<img src="http://lorempixel.com/1500/1000" />

展开摘要

参见MDN-关于object-fit: cover：

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

另外，请参见此Codepen演示，该演示比较了object-fit: cover应用于图像和background-size: cover应用于背景图像

解决方案＃2-将背景图片替换为具有CSS的img

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

展开摘要

— 丹尼尔
source

3

在发表本文时，Internet Explorer的任何版本（甚至Edge）尚不支持对象适配。但是，正在考虑中。

— Mike Kormendy

3

IE中仍然不支持object-fit。如果在生产站点上，并且您关心IE用户，我将远离您。

— 特拉维斯·迈克尔·海勒

2

您还可以为IE和旧版Safari添加＃1的polyfill

— Valera

1

小心第二种解决方案。最好不要在移动浏览器上依赖vh：nicolas-hoizey.com/2015/02/…–

— sudokai

1

@RoCk，您可以在caniuse上找到类似的内容：caniuse.com/#search=background-att :) PS我认为我们都可以放心IE将永远不会支持此功能，并且由于也没有polyfill，我们重新拧紧或卡在JS / CSS hacks上，直到MS决定通过从Windows中删除它来（最终）“谋杀” IE为止。

— SidOfc

31

实际上有一个相当简单的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>

展开摘要

— 西蒙
source

9

这不会复制Cover的行为，而是从src img裁剪中心部分。请参阅jsfiddle.net/sjt71j99/4－第一个img是您的作物，第二个是通过background-size：封面，即我们想要的，第三个是原始img。我发现横向img用max-height代替min-height和min-width：100％; 纵向使用最大宽度：100％。如果有一种适用于风景或人像的解决方案，那就太好了。有任何想法吗？这是到目前为止我所见过的最好的跨浏览器解决方案。

— 2015年

1

没错，它做的并不完全相同，我尝试了一些方法，但是看来您实际上无法100％复制覆盖率，只要图像小于一维容器，它就可以工作虽然。

— 西蒙（Simon）

@terraling，我知道这是一条旧评论，但请查看我的回答。它使用transform将img放置在中心。

— Thiago Barcala

30

假设您可以安排要填充的容器元素，这看起来很有效，但感觉有点破旧。本质上，我只是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>

展开摘要

— 乌尔里希·施瓦兹（Ulrich Schwarz）
source

1

完全同意。这是以上所有通用的最佳解决方案。

— VarisVītols19年

这很棒。它帮助了我。谢谢

— 拉曼·尼基森卡

13

我找到了一个模拟覆盖和包含的简单解决方案，它是纯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>

展开摘要

— 蒂亚戈·巴尔卡拉（Thiago Barcala）
source

规模技巧已经在这里https://stackoverflow.com/a/28771894/2827823给出，所以我看不到再发布一个重点，所以transform在很多答案中也是如此

— Ason

如果您想扩展说明，请更新该答案，因为不需要使用相同的解决方案来解决2

— Ason

1

感谢您对@LGSon的评论。我以前没有看过这个答案，但我仍然认为我的答案在这里有价值。该方法几乎相同，但我认为我的呈现方式略为简洁。此处的许多其他答案都提供了相同的解决方案，并且所有答案都不完整（除了您链接的答案之外）。因此，如果我的答案不应该在这里，其他人也不应该。

— Thiago Barcala

1

我发现它可以在Android的Chrome移动浏览器中缩小图像（在LG G3和Samsung S9上进行了测试），我没有在iOS的Chrome浏览器上对其进行测试，Android的Firefox mobile可以正确显示它。

— 杰科

10

不，您不能完全喜欢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/

— roo2
source

3

我需要模仿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>

展开摘要

— 古斯
source

您可以使用min-height: 100%; max-height:100%;并获得等同于background-size的值：cover;

— 克里斯·塞弗特

min-height: 100%; max-height:100%;不会保留长宽比，因此不完全相同。

— Reedyn

2

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

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

（小提琴）

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

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

— 杰里米
source

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>

展开摘要

— 记忆
source

2

您可以做的是使用'style'属性将背景图片添加到元素中，这样，您仍将在HTML中调用图片，但仍然可以使用background-size：cover 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。繁荣

— 查理·图普曼
source

1

大多数情况下，关注点分离，但是这里还有一些其他关注点：programmers.stackexchange.com/a/271338

— Daan

0

对于IE，您还需要添加第二行-width：100％；

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

— фымышонок
source

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

展开摘要

— 阿西姆·拉玛（Asim Ramay）
source

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

— 世俗12
source

0

我们可以采用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%);
}

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

— 雷马特
source

-1

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

遇到相同的症状。以上为我工作。

— 用户名
source