CSS：让img完全适合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>

Answer 2

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

了解更多信息 media queries

Answer 3

这很简单。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;