是否有与背景大小等效的内容：图像元素的 cover 和 contains ？

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

Or:

div.mydiv img {
    width: auto;
}

使画面饱满且反应灵敏。不过图片缩小太多了（width: 100%）当屏幕变得太窄时，并在底部屏幕中显示正文的背景颜色。另一种方法，width: auto;，仅使图像全尺寸，不响应屏幕尺寸。

有没有办法以同样的方式显示图像background-size: cover does?

解决方案#1 -对象适合性 http://www.w3.org/TR/css3-images/#object-fit (缺乏 IE 支持 http://caniuse.com/#feat=object-fit)

刚刚设置object-fit: cover;在 img 上。

body {
  margin: 0;
}
img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* or object-fit: contain; */
}

<img src="https://loremflickr.com/1500/1000" alt="A random image from Flickr" />

See MDN https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit#Values- 关于object-fit: cover:

替换内容的大小可保持其纵横比，同时 填充元素的整个内容框。如果物体的纵横比 与它的盒子的长宽比不匹配，那么该对象将是 剪裁以适合。

And for object-fit: contain:

替换的内容会进行缩放以保持其纵横比，同时适合元素的内容框。整个对象填充该框，同时保留其纵横比，因此如果其纵横比与框的纵横比不匹配，则该对象将被“黑框化”。

另请参阅这个 Codepen 演示 https://codepen.io/danield770/pen/XYjZvN比较object-fit: cover应用于图像background-size: cover应用于背景图像

解决方案#2 - 使用 css 将 img 替换为背景图像

body {
  margin: 0;
}

img {
  position: fixed;
  width: 0;
  height: 0;
  padding: 50vh 50vw;
  background: url("https://loremflickr.com/1500/1000") no-repeat;
  background-size: cover;
}

<img src="https://via.placeholder.com/1500x1000" alt="A random image from Flickr" />