Html div内的响应图像

嗯，我有一个

div

，宽度

50%

和高度

200px

的div，这个div里面有一个图像，我想让它在所有分辨率下都响应。如果我把这个图像放在div的背景图像上，给它

背景大小：cover

和响应输出与我想要的完全相似。但问题是我不能把这张图片放在背景图片上，应该是

您可以使图像的高度

自动

，它应该相应地调整大小。或者您可以忽略height属性，如果不给它一个值，它默认设置为auto

更新：

您可以设置

min height/width

，以便图像可以执行您想要的操作。基本上，将最小高度设置为100%，这样就不会降低高度。然后将min width设置为实际图像的宽度，这样它就不会小于这个值

---

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

绝对位置为左：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
}

.集装箱{
宽度：25%；
高度：200px；
溢出：隐藏；
位置：相对位置；
}
.集装箱img{
位置：绝对位置；
右：0；左：0；
保证金：自动
}

刚刚制作

高度：自动

您在小分辨率上试过吗？不，它不工作，请将预览部分的宽度更改为更小。我以前尝试过

height:auto

，但我不想要这个。是的，这正是我想要的<代码>最小高度：对于

img

，为200px。谢谢您的帮助。@jiff我认为您不应该将

最小高度设置为200px

，您应该将其保持在

100%

。这样，如果你将来更新你的

容器高度

，你就不必担心更新图像的

最小高度

，哦，你说得对，但是容器总是

200px

，但我同意你的看法，

minheight:100%

是一种更好、正确的方法。这不起作用，因为当容器变大时，图像不会变大。我没有顺便投你一票。此外，我不介意被否决，如果答案是无用的-鼓励更好的答案。