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

我试图使图像（动态放置，没有尺寸限制）与其父div一样宽，但前提是该宽度不超过其自身的100%宽度。我试过这个，但没有用：

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

---

这些图像中的很多都比它们的父div宽很多，这就是为什么我希望它们能相应地调整大小，但是当一个小图像突然出现并被放大到超出其正常尺寸时，它看起来真的很糟糕。有什么方法可以做到这一点吗？

只需指定

最大宽度：100%

，就可以了。

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

在谷歌搜索中找到了这篇文章，感谢@jwal回复，它解决了我的问题，但我对他的解决方案做了一个补充

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

通过以上操作，我将最大宽度更改为图像所在内容容器的尺寸。在这种情况下，它是：容器宽度-填充-边界=最大宽度

这样我的图像就不会脱离包含的div，而且我仍然可以在content div中浮动图像

我已经在IE 9、FireFox 18.0.2和Chrome 25.0.1364.97、Safari iOS中进行了测试，似乎可以正常工作

---

附加：我在一张1024px宽、678px（最大宽度）显示的图像和一张500px宽、500px（图像宽度）显示的图像上进行了测试。

如果图像小于父图像

.img_100 {
  width: 100%;
}

---

我将使用属性

display:table cell

---

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

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

---

我也有同样的问题，但我在CSS中将高度值设置为自动，这就解决了我的问题。另外，不要忘记执行display属性

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

---

我找到了一个对我有用的答案，可以在以下链接中找到：

线条风格-每次都适合我

我发现

最大宽度：inherit为我工作< /P>如果你只指定代码>最大宽度：100% < /代码>？根据IE8的说法，它的实现是有缺陷的。Chromium似乎只是将其保持在100%，而不考虑上下文。也许我应该停止不停地看我在测试版软件上的工作。非常感谢。如何在不使用“最大宽度：100%”的情况下执行此操作。在React-Native中，不能使用百分比。@Croolsby您可以在React-Native中使用百分比，但使用字符串值，如“100%”，请尽可能提供一个工作示例。建议使用。：）使用
width:auto！重要的修复了IE11中的一个问题，即图像将大于其容器，并且IE11没有缩小图像。在
img
选择器中设置此选项可在IE11中对问题进行排序。但是设置<代码>宽度：100%在IE11中什么都不做。因此，必须包含“覆盖”以使图像缩小到其容器的大小。仅供参考。您可以删除高度：自动和宽度：自动。最大高度和最大宽度是一样的。
<div class="imgWrapper">
    <img src="/theImg.jpg" style="max-width: 100%">
</div>