html的cover属性,html – 有一个等价于background-size：cover和包含图像元素？

解决方案#1 – 新的

object-fit property(

No IE support yet)

只是设置对象适合：盖;在img。

body {

margin: 0;

}

img {

display: block;

width: 100vw;

height: 100vh;

object-fit: cover;

}

你可以阅读更多关于这个新的属性在这个webplatform article。

从上面的文章 – 关于’cover’值：

The whole image is scaled down or expanded till it fills the box

completely, the aspect ratio is maintained. This normally results in

only part of the image being visible.

此外，这里是从上面的文章a fiddle演示object-fit属性的所有值。

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

}