如何在CSS中设置图像的最大宽度 [英] How to set max width of an image in CSS

问题描述

在我的网站上，我想显示由用户在特定大小（ width：600px ）的新窗口中上传的图片。问题是图像可能很大。因此，如果他们大于这些 600px ，我想调整它们的大小，保持宽高比。

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.

尝试了 max-width CSS属性，但它不工作：图像的大小不会改变。

I tried the max-width CSS property, but it doesn't work: the image's size doesn't change.

有没有办法解决这个问题？

Is there any way to solve this problem?

HTML p>

HTML:

<div id="ImageContainerr">
    <img src="DisplayImage.do?ad_id=${requestScope.advert.id}" class="Image" />
</div>

CSS ：

img.Image { max-width: 100%;}
div#ImageContainer { width: 600px; }

我也尝试设置 max-width：600px 为一个图像，但不工作。

I also tried setting the max-width: 600px for an image, but doesn't work. The image is streamed from a servlet (it's stored outside Tomcat's webapps folder).

推荐答案

您可以这样写：

img{
    width:100%;
    max-width:600px;
}

检查此http://jsfiddle.net/ErNeT/

这篇关于如何在CSS中设置图像的最大宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！