使图像宽度为父div的100%,但不大于其自身的宽度

Question

我试图获得一个图像(动态放置,对尺寸没有限制)与其父div一样宽,但只要该宽度不宽于100%的宽度.我试过这个,但无济于事:

img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

这些图像中的许多图像比它们的父图像宽,这就是为什么我希望它们相应地调整大小,但是当一个小图像在那里弹出并且缩小到超出其正常尺寸时,它看起来真的很糟糕.有没有办法做到这一点？

Answer 1

只需max-width: 100%单独指定,就应该这样做.

Answer 2

在谷歌搜索上找到了这篇文章,由于@jwal回复它解决了我的问题,但我在他的解决方案中添加了一个.

img.content.x700 {
  width: auto !important; /*override the width below*/
  width: 100%;
  max-width: 678px;
  float: left;
  clear: both;
}

通过上面我将max-width更改为我的图像所在的内容容器的尺寸.在这种情况下,它是:container width - padding - boarder = max width

这样我的图像就不会突破包含的div,我仍然可以将图像浮动到内容div中.

我已经在IE 9,FireFox 18.0.2和Chrome 25.0.1364.97,Safari iOS中进行了测试,似乎可以正常运行.

附加:我在以678px(最大宽度)显示的1024px宽的图像上测试了这个,并且以500px(图像的宽度)显示500px宽的图像.