是否有等效于背景大小：图像元素的覆盖和包含？

Question

我有一个包含许多页面和不同背景图片的网站，我从 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 相同的方式显示图像？

原文由 pat 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

解决方案 #1 - object-fit 属性（ 缺乏 IE 支持）

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

 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" />

请参阅 MDN - 关于 object-fit: cover ：

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

对于 object-fit: contain ：

被替换的内容被缩放以保持其纵横比，同时适合元素的内容框。整个对象被制作成填充盒子，同时保持其纵横比，因此如果其纵横比与框的纵横比不匹配，则该对象将被“信箱化”。

另外，请参阅 此 Codepen 演示，它比较了 object-fit: cover 应用于图像与 background-size: cover 应用于背景图像

---

解决方案 #2 - 将 img 替换为带有 css 的背景图像

 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" />

原文由 Danield 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

实际上有一个非常简单的 css 解决方案 甚至可以在 IE8 上运行：

 .container {
  position: relative;
  overflow: hidden;
  /* Width and height can be anything. */
  width: 50vw;
  height: 50vh;
}

img {
  position: absolute;
  /* Position the image in the middle of its container. */
  top: -9999px;
  right: -9999px;
  bottom: -9999px;
  left: -9999px;
  margin: auto;
  /* The following values determine the exact image behaviour. */
  /* You can simulate background-size: cover/contain/etc.
     by changing between min/max/standard width/height values.
     These values simulate background-size: cover
  */
  min-width: 100%;
  min-height: 100%;
}

 <div class="container">
    <img src="http://placehold.it/200x200" alt="" />
</div>

原文由 Simon 发布，翻译遵循 CC BY-SA 3.0 许可协议