是否有等效于background-size的图像元素：Cover和Contain？

一尘不染

是否有等效于background-size的图像元素：Cover和Contain？

html

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

阅读 366

2020-05-10

共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：

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

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

2020-05-10