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.
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:
<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; }
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).
max-width
, don't setmax-height
and it should work. If not, post your code so others can help you to spot the problem.id
here didn't match the CSS. As written (20151201), this question boils down to, "CSS selectors that don't match any DOM objects don't influence appearance". ;^) (Can't figure if it'd be better to edit the question to ask what its title implies does or not...)