使图像宽度为父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宽的图像。

Answer 3

设置宽度为100％是div的全宽，而不是原始的全尺寸图像。没有JavaScript或其他可以测量图像的脚本语言，就无法做到这一点。如果你可以有一个固定宽度或固定高度的div（如200px宽），那么给图像一个填充范围应该不会太难。但是如果你将一个20x20像素的图像放在一个200x300像素的盒子里，它仍然会被扭曲。

Answer 4

如果图像比父母小...

.img_100 {
  width: 100%;
}

Answer 5

我也有同样的问题，但我将CSS中的高度值设置为auto，这解决了我的问题。另外，不要忘记显示属性。

  #image {
      height: auto;
      width: auto;
      max-height: 550px;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      display: block;
 }  

Answer 6

您应该设置最大宽度，如果需要，还可以在其中一侧设置一些填充。在我的情况下，最大宽度：100％是好的，但图像就在屏幕的末尾。

  max-width: 100%;
  padding-right: 30px;
  /*add more paddings if needed*/

Answer 7

我会使用属性display: table-cell

这是link