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

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

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

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

Answer 1

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

Answer 2

在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宽的图像。

Answer 3

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

Answer 4

如果图像小于父…

 .img_100 { width: 100%; } 

Answer 5

我将使用属性display: table-cell

这是链接