div内的响应式图像

Question

好吧,我有一个div与50% width和200px高度,有这个div,我希望把它在所有分辨率响应内的图像.如果我把这个图像放在div的背景图像上,并给它background-size: cover和响应输出完全相似我想要的.但问题是我不能把这个图像放在背景图像上,应该是一个<img/>元素.

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

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

#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;
}

<!-- 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>

提前致谢

Answer 1

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

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

更新:

你可以设置一个min-height/width图像可以做你想要的.基本上将最小高度设置为100%,因此它的高度永远不会变小.然后将min-width设置为实际图像的宽度,因此它不会小于该值.

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