CSS: 使图像完全适合 div

Question

在新闻网站上工作，一旦我开始使用移动设备，我希望它的图像适合 div 的整个宽度......无论它是什么。这些图像最初的宽度为 240 像素，因此我们正在谈论将它们向上凸起。这是我目前正在使用的：

.thumb { float: left; clear: both; width: 100%; height: auto; margin: 0; }
.thumb img { max-width: 100%; max-height: 100%; }

所以在我的 iPhone 上，图片有点太小了，因为 div 是 320px，而 img 是 240。当然，这会改变，例如，风景为 480px例子。所以它需要灵活。有什么建议吗？

Answer 1

@media screen and (max-width: 480px) //place whatever the resolution you are working here{
  /*enter your code here for this resolution*/
}

Answer 2

您可以尝试以下操作，将图片宽度设置为 100%。

.thumb {
  float: left;
  clear: both;
  width: 100%;
  height: auto;
  margin: 0;
}
.thumb img {
  width: 100%;
}

<div class="thumb">
  <img src="http://placehold.it/200x100">
</div>

Answer 3

就这么简单。

img {
    width:100%;
}
div{
    float: left; clear: both; width: 100%; height: auto; margin: 0; 
}

<div>
    <img src="http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image2.jpg" />
</div>

CSS: Make img fit completely in div