是否有相当于背景大小:图像元素的封面和包含?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (15)

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

使画面完整和反应灵敏。然而,当屏幕变得更窄时,图片会缩小太多(宽度:100%),并在屏幕底部显示身体背景颜色。另一种方法,width: auto;,只使图像完全大小,而不响应屏幕大小。

是否有一种方法可以以同样的方式显示图像background-size: cover有吗?

提问于
用户回答回答于

解决方案1

只是设置object-fit: cover;在IMG上。

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

关于“封面”价值:

整个图像被缩小或扩展,直到它完全填满盒子,保持高宽比。这通常只导致部分图像可见。

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

用户回答回答于

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

扫码关注云+社区