CSS:如何缩放<img>以覆盖整个父<div>？

Question

题:

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

这<img>不像我期望的那样收缩包装min-width:100%

我试图收缩, <img>直到高度或宽度与容器匹配

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

请尝试编辑<img>CSS:

1)维持宽高比

2)容器DIV的覆盖整个表面区域

3)仅编辑图像

这种中心方法看起来有点草图,但它非常强大

我的问题具体是:即使父母调整大小,也要缩放<img>父级的FILL(保持宽高比但覆盖整个表面)<div><div>

也许我可以以某种方式使用CSS flex盒布局或什么？也许是变换？

答案:

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

将HTML源设置为透明base64像素(信用CSS技巧)

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

使用CSS背景属性

#img {
    width: 100%;
    height: 100%;
    background: url(http://i.imgur.com/0BBsCUB.gif) no-repeat center;
    background-size: cover;
}

Answer 1

如果您不想触摸容器,请将背景放在 <img>

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

Answer 2

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

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

object-fit:cover允许替换内容的大小在填充元素的整个内容框时保持其宽高比:其具体对象大小被解析为对元素使用的宽度和高度的封面约束.