Html 使图像宽度为父 div 的 100%，但不大于其自身宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3463664/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make an image width 100% of parent div, but not bigger than its own width
提问by Alfonso
I'm trying to get an image (dynamically placed, with no restrictions on dimensions) to be as wide as its parent div, but only as long as that width isn't wider than its own width at 100%. I've tried this, to no avail:
我正在尝试使图像（动态放置，对尺寸没有限制）与其父 div 一样宽，但前提是该宽度不比其自身宽度 100% 宽。我试过这个，无济于事：
img {
width: 100%;
height: auto;
max-width: 100%;
}
Many of these images are way wider than their parent div, which is why I'd like them to resize accordingly, but when a small image pops in there and gets scaled up beyond its normal dimensions, it really looks terrible. Is there any way of doing this?
这些图像中的许多比它们的父 div 宽得多，这就是为什么我希望它们相应地调整大小，但是当一个小图像出现在那里并被放大到超出其正常尺寸时，它看起来真的很糟糕。有没有办法做到这一点？
回答by Fyodor Soikin
Just specify max-width: 100%alone, that should do it.
只需max-width: 100%单独指定，就可以了。
回答by mattauckland
Found this post on a Google search, and it solved my issue thanks to @jwal reply, but I made one addition to his solution.
在 Google 搜索中找到了这篇文章，感谢@jwal 的回复，它解决了我的问题，但我对他的解决方案做了一个补充。
img.content.x700 {
width: auto !important; /*override the width below*/
width: 100%;
max-width: 678px;
float: left;
clear: both;
}
With the above I changed the max-width to the dimensions of the content container that my image is in. In this case it is: container width - padding - boarder = max width
通过上述，我将最大宽度更改为我的图像所在的内容容器的尺寸。在这种情况下，它是：容器宽度 - 填充 - 边界 = 最大宽度
This way my image won't break out of the containing div, and I can still float the image within the content div.
这样我的图像就不会脱离包含的 div，我仍然可以在内容 div 中浮动图像。
I've tested in IE 9, FireFox 18.0.2 and Chrome 25.0.1364.97, Safari iOS and seems to work.
我已经在 IE 9、FireFox 18.0.2 和 Chrome 25.0.1364.97、Safari iOS 中进行了测试，并且似乎可以正常工作。
Additional: I tested this on an image 1024px wide displayed at 678px (the max width), and an image 500px wide displayed at 500px (width of the image).
附加：我在以 678 像素（最大宽度）显示的 1024 像素宽图像和以 500 像素（图像宽度）显示的 500 像素宽图像上进行了测试。
回答by Amanda
Setting a width of 100% is the full width of the div it's in, not the original full-sized image. There is no way to do that without JavaScript or some other scripting language that can measure the image. If you can have a fixed width or fixed height of the div (like 200px wide) then it shouldn't be toohard to give the image a range to fill. But if you put a 20x20 pixel image in a 200x300 pixel box it will still be distorted.
将宽度设置为 100% 是它所在 div 的全宽，而不是原始全尺寸图像。如果没有 JavaScript 或其他可以测量图像的脚本语言，就无法做到这一点。如果您可以拥有固定宽度或固定高度的 div（例如 200px 宽），那么为图像提供一个填充范围应该不会太难。但是如果你把一个 20x20 像素的图像放在一个 200x300 像素的盒子里，它仍然会失真。
回答by Combine
You should set the max width and if you want you can also set some padding on one of the sides. In my case the max-width: 100% was good but the image was right next to the end of the screen.
您应该设置最大宽度，如果需要，您还可以在一侧设置一些填充。在我的情况下， max-width: 100% 很好，但图像就在屏幕的末尾。
max-width: 100%;
padding-right: 30px;
/*add more paddings if needed*/
回答by Noah Franco
I was also having the same problem, but I set the height value in my CSS to autoand that fixed my problem. Also, don't forget to do the display property.
我也遇到了同样的问题，但我将 CSS 中的高度值设置为auto并解决了我的问题。另外，不要忘记做显示属性。
#image {
height: auto;
width: auto;
max-height: 550px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
display: block;
}
回答by Scription
I found an answer which worked for me and can be found in the following link:
我找到了一个对我有用的答案，可以在以下链接中找到：
回答by Nelles
In line style - this works for me every time
线条风格 - 这每次都对我有用
<div class="imgWrapper">
<img src="/theImg.jpg" style="max-width: 100%">
</div>
回答by SandroMarques
If the image is smaller than parent...
如果图像小于父...
.img_100 {
width: 100%;
}
