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

我试图得到一个图像(dynamic放置,没有限制的尺寸)是一样宽,它的父div,但只有只要该宽度不宽于自己的宽度在100%。 我试过这个,无济于事:

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

这些图像中的许多图像比父div更宽,这就是为什么我希望它们相应地resize的方法,但是当一个小图像突然出现并超出其正常尺寸时,它确实看起来很糟糕。 有没有办法做到这一点?

只需指定max-width: 100% ,应该这样做。

在Googlesearch中find了这个post,并且由于@jwal的回复,它解决了我的问题,但是我对他的解决scheme做了一个补充。

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

在上面,我将最大宽度更改为我的图像所在的内容容器的尺寸。在这种情况下,它是:容器宽度 – 填充 – 边框=最大宽度

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

我已经testing了IE 9,FireFox 18.0.2和Chrome 25.0.1364.97,Safari iOS,似乎工作。

另外:我testing了这个图像在678px(最大宽度)1024px宽的图像,500px宽的图像500px宽的图像。

设置100%的宽度是其所在的div的整个宽度,而不是原始的全尺寸图像。 如果没有JavaScript或其他可以测量图像的脚本语言,就没有办法做到这一点。 如果你可以有一个固定的宽度或固定的高度的div(如200像素宽),那么不应该太难让图像的范围来填补。 但是如果你把一个20×20像素的图像放在一个200×300像素的盒子里,它仍然会失真。

如果图像小于父…

 .img_100 { width: 100%; } 

我将使用属性display: table-cell

这是链接