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

您可以尝试以下操作，将图像宽度设置为 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>