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

Question

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

Answer 1

解决方案#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" />

Answer 2

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

Answer 3

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

Answer 4

不,你不能得到它,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/

Answer 5

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