div内的响应式图像

Question

好吧，我有一个div 50% width和200px高度，这个div中有一个图像，我想让它在所有分辨率下都有响应。如果我把这个图像放在div的背景图像上并给它background-size: cover并且响应输出与我想要的完全相似。但问题是我无法将此图像放在背景图像上，而且应该是<img/>元素。

所以我在 JSFiddle 上做了一个例子来澄清我的问题。

运行此示例后，请更改预览区域宽度以查看响应输出。好的，顶部图像在div内部有<img/>，底部图像是背景图像。我想要用background-image完全响应输出的底部div，另一方面问题是：如何使图像像div中的background-size: cover一样响应。

＆＃13;

＆＃13;

#DivWithImg {
  width: 50%;
  height: 200px;
  background: red;
  margin: 0 5px 0 5px;
  overflow: hidden;
  border: 1px solid black;
}

#DivWithImg img {
  width: 100%;
  height: 100%;
}

#DivWithBGImg {
  width: 50%;
  height: 200px;
  background: red url('http://img.huffingtonpost.com/asset/scalefit_600_noupscale/56328113190000a600b9540d.jpeg');
  margin: 0 5px 0 5px;
  background-size: cover;
  border: 1px solid black;
}

＆＃13;

<!-- Div With Image -->

<div id="DivWithImg">
<img src="http://img.huffingtonpost.com/asset/scalefit_600_noupscale/56328113190000a600b9540d.jpeg"/>
</div>
<br>
<!-- Div With Background Image -->

<div id="DivWithBGImg">
</div>

＆＃13;

＆＃13;

＆＃13;

提前致谢

Answer 1

你可以为图像制作高度auto，它应该相应调整大小。或者你可以省略高度属性，如果你没有给它一个值，它默认设置为自动

https://jsfiddle.net/ahmadabdul3/4njw64s0/1/

更新

您可以设置min-height/width，以便图片可以执行您想要的操作。基本上将最小高度设置为100％，因此它的高度永远不会变小。然后将最小宽度设置为实际图像的宽度，因此它不会小于该值。

https://jsfiddle.net/ahmadabdul3/4njw64s0/4/

Answer 2

您也可以通过绝对定位来管理它，使其更像盖子。示例 fiddle

左侧绝对位置：0和右侧：0带边距：自动居中图像水平。将容器的溢出设置为隐藏意味着它不会扩展到容器的边缘。

小提琴代码;

<div class="container">
      <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" alt="">
</div>
.container{
  width: 25%;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.container img{
  position: absolute;
  right: 0; left: 0;
  margin: auto
}