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


