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

只需单独指定 max-width: 100% 即可。

---

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

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

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

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

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

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

---

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

---

线条风格 - 这对我每次都有效

<div class="imgWrapper">
    <img src="/theImg.jpg" style="max-width: 100%">
</div>

---

我写了这段代码：

div.image {
   height: auto;
   width: 100%;
}

div.image img {
    height: inherit;
    width: inherit;
}

---

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

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

---

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

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

---

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

Full Width Containers in Limited Width Parents

---

我发现 max-width:inherit; 对我有用

---

如果图像小于父图像...

.img_100 {
  width: 100%;
}

---

我会使用属性 display: table-cell

这是link

---