How to set maximum image width in CSS

Question

On my website, I would like to display images uploaded by the user in a new window with a specific size ( width: 600px ). The problem is that images can be large. Therefore, if they are larger than these 600px , I would like to resize them, keeping the aspect ratio.

I tried the max-width CSS property, but it does not work: the image size does not 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 max-width: 600px for the image, but it doesn't work. The image is transferred from the servlet (it is stored outside the Webapps Tomcat folder).

Answer 1

You can write like this:

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

Check out http://jsfiddle.net/ErNeT/

Answer 2

Given the width of the container is 600px.

If you only need larger images than those inserted inside, add: CSS:

 #ImageContainer img { max-width: 600px; } 

If you want ALL images to take up available space (600 pixels):

 #ImageContainer img { width: 600px; } 

Answer 3

The problem is that the img tag is an inline element, and you cannot limit the width of the inline element.

So, to first limit the width of the img tag, you need to convert it to an element of the inline block

 img.Image{ display: inline-block; } 

Answer 4

try it

  div#ImageContainer { width: 600px; } #ImageContainer img{ max-width: 600px} 

Answer 5

Your css is almost right. You just do not have enough display: block; in the css image. Also one typo in your id. It should be <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> 

Answer 6

I see that this is not answered as final.

I see you have a maximum width of 100% and a width of 600. Turn them over.

A simple way also:

  <img src="image.png" style="max-width:600px;width:100%"> 

I use this often, and then you can manage individual images, and not have it on all img tags. You can CSS this as shown below.

  .image600{ width:100%; max-width:600px; } <img src="image.png" class="image600">