Html 如何在 CSS 中设置图像的最大宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11078913/
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
How to set max width of an image in CSS
提问by user1315305
On my website I would like to display images uploaded by user in a new window with a specific size (width: 600px). The problem is that the images may be big. So if they are bigger than these 600px, I would like to resize them, preserving the aspect ratio.
在我的网站上，我想在具有特定大小 ( width: 600px)的新窗口中显示用户上传的图像。问题是图像可能很大。所以如果它们比这些大600px，我想调整它们的大小，保持纵横比。
I tried the max-widthCSS property, but it doesn't work: the image's size doesn't change.
我尝试了max-widthCSS 属性，但它不起作用：图像的大小没有改变。
Is there any way to solve this problem?
有没有办法解决这个问题？
HTML:
HTML:
<div id="ImageContainerr">
<img src="DisplayImage.do?ad_id=${requestScope.advert.id}" class="Image" />
</div>
CSS:
CSS:
img.Image { max-width: 100%;}
div#ImageContainer { width: 600px; }
I also tried setting the max-width: 600pxfor an image, but doesn't work. The image is streamed from a servlet (it's stored outside Tomcat's webapps folder).
我也尝试max-width: 600px为图像设置，但不起作用。该图像是从 servlet 流式传输的（它存储在 Tomcat 的 webapps 文件夹之外）。
回答by sandeep
You can write like this:
你可以这样写：
img{
width:100%;
max-width:600px;
}
Check this http://jsfiddle.net/ErNeT/
回答by Merle_the_Pearl
I see this hasn't been answered as final.
我看到这还没有作为最终答案。
I see you have max-width as 100% and width as 600. Flip those.
我看到你的最大宽度为 100%，宽度为 600。翻转它们。
A simple way also is:
一个简单的方法也是：
<img src="image.png" style="max-width:600px;width:100%">
I use this often, and then you can control individual images as well, and not have it on all img tags. You could CSS it also like below.
我经常使用它，然后您也可以控制单个图像，而不是在所有 img 标签上都使用它。你也可以像下面那样使用 CSS。
.image600{
width:100%;
max-width:600px;
}
<img src="image.png" class="image600">
回答by Kamlesh Uikey
The problem is that imgtag is inline element and you can't restrict width of inline element.
问题是img标签是内联元素，你不能限制内联元素的宽度。
So to restrict img tag width first you need to convert it into a inline-block element
因此，首先要限制 img 标签宽度，您需要将其转换为内联块元素
img.Image{
display: inline-block;
}
回答by Leo Armentano
Given your container width 600px.
鉴于您的容器宽度为 600 像素。
If you want only bigger images than that to fit inside, add: CSS:
如果你只想要比里面更大的图像，添加：CSS：
#ImageContainer img {
max-width: 600px;
}
If you want ALL images to take the avaiable (600px) space:
如果您希望所有图像都占用可用（600 像素）空间：
#ImageContainer img {
width: 600px;
}
回答by Krish
Try this
尝试这个
div#ImageContainer { width: 600px; }
#ImageContainer img{ max-width: 600px}
回答by Rhythm Ruparelia
Your css is almost correct. You are just missing display: block;in image css.
Also one typo in your id. It should be <div id="ImageContainer">
你的css几乎是正确的。您只是缺少display: block;图像 css。你的身还有一个错字。它应该是<div id="ImageContainer">
img.Image { max-width: 100%; display: block; }
div#ImageContainer { width: 600px; }<div id="ImageContainer">
<img src="http://placehold.it/1000x600" class="Image">
</div>