小编典典

是否有等效于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呢?


阅读 420

收藏
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