如何缩放图像以覆盖整个父 div？

Question

http://jsfiddle.net/Log82brL/15/

这 <img> 不是我所期望的收缩包装 min-width:100%

我正在尝试缩小 <img> 直到高度或宽度与容器匹配

单击 <iframe> 中的任意位置以切换容器形状

请尝试编辑 <img> CSS：

1. 保持纵横比
2. 覆盖容器 DIV 的整个表面积
3. 仅编辑图像

我的问题具体是：缩放 <img> 以保持宽高比但覆盖父级的整个表面 <div> 即使作为父 <div> 。

也许我可以以某种方式使用 css flex box-layout 之类的东西？也许是转型？

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

Answer 1

http://jsfiddle.net/Log82brL/7/

 #img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

object-fit: cover 允许替换内容的大小保持其纵横比，同时填充元素的整个内容框：其具体对象大小被解析为针对元素使用的宽度和高度的覆盖约束。

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

Answer 2

如果不想碰容器，就把背景放在 <img>

 #img {
  background: url(imgpath) no-repeat center;
  background-size: cover;
}

您可以将 HTML 源代码设置为透明的 base64 像素（信用 CSS 技巧）

 <img id="img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />

http://jsfiddle.net/Log82brL/17/

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