使图像宽度为父 div 的100% ，但不要大于它自己的宽度

我试图让一个图像(动态放置，没有尺寸限制)和它的父 div 一样宽，但是只要宽度不超过它自己100% 的宽度。我试过了，没有用:

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

这些图片中的许多比它们的父 div 要宽得多，这就是为什么我希望它们相应地调整大小，但是当一个小图片突然出现在那里并且被放大到超过其正常尺寸时，它看起来真的很糟糕。有什么办法吗？

359137 次浏览
小开
最佳答案

只要指定 max-width: 100%就可以了。

小开

设置宽度为100% 是它所在的 div 的全宽，而不是原始的全尺寸图像。如果没有 JavaScript 或其他可以测量图像的脚本语言，就不可能做到这一点。如果你可以有一个固定宽度或固定高度的 div (像200像素宽) ，那么它不应该是 也是难以给图像一个范围来填充。但是如果你把一个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 中浮动图像。

我已经在 IE9，FireFox 18.0.2和 Chrome 25.0.1364.97，Safari iOS 中测试过，看起来还不错。

附加: 我测试了在678px (最大宽度)宽度为1024px 的图像和500px 宽度为500px (图像宽度)宽度为500px 的图像。

小开

如果图像比父母的小..。

.img_100 {
width: 100%;
}
小开

我将使用属性 display: table-cell

这是 链接

小开

您应该设置的最大宽度，如果你想，你也可以设置一些填充的一方。在我的例子中，最大宽度: 100% 很好，但是图像就在屏幕的末端。

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

我也遇到了同样的问题，但是我把 CSS 中的高度值设置为 奥托，这就解决了我的问题。另外，不要忘记显示属性。

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

我找到了一个适合我的答案，可以在以下链接中找到:

有限宽度父代中的全宽容器

小开

在线风格-这为我工作的每一次

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

我发现 max-width:inherit;适合我

小开

我写了这段代码:

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


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

提交答案