109

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).

7
  • 2
    if you want it to auto scale down, just set max-width, don't set max-height and it should work. If not, post your code so others can help you to spot the problem.
    – Ray Cheng
    Jun 18, 2012 at 8:02
  • 2
    I just tried your example and it works here. Are you sure you don't have the same typo in your actual html ("ImageContainerr") as here in this example?
    – Mr Lister
    Jun 18, 2012 at 8:16
  • Damn, you're right. I restarted my Tomcat and browser, tried again - and it really works fine. Thanks anyway :) The typo wasn't the case - I changed the id and class name in here so it would be easier to understand. Jun 18, 2012 at 8:21
  • 3
    From this I would asume that you don't use Firebug or other developer tools. I suggest you get yourself Firebug and learn to use it. ( By inspecting these two elements you would've seen that the width wasn't added to the container. )
    – Joonas
    Jun 18, 2012 at 8:24
  • 3
    Warning: This question is much less broadly applicable than it initially appears. Looks like a lot of upvotes might be because those upvoters also missed that the 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...)
    – ruffin
    Dec 1, 2015 at 16:46

7 Answers 7

167

You can write like this:

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

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

10
  • 1
    Thanks a lot! That works perfectly! Edit: Well, not exatcly - it also resizes images that are smaller than 600px - and that's something I don't want. Jun 18, 2012 at 8:11
  • 4
    I down voted. What the OP want's is not what you offer. You should've also realized that that there could be a problem in OP's code cause normally what he tried, should work.. Who ever up voted, give me a reason, thanks.
    – Joonas
    Jun 18, 2012 at 8:30
  • 1
    @Lollero first OP edit his question after my answer & can you explain what's wrong in my answer? thanks
    – sandeep
    Jun 18, 2012 at 8:36
  • 3
    This doesn't preserve aspect ratio in IE
    – Cocowalla
    Jan 19, 2013 at 12:42
  • 2
    What's the purpose of the "width:100%"? The linked fiddle seems to work fine without it? (Tested in Firefox and Safari on Mac OX) Sep 22, 2017 at 13:38
23

I see this hasn't been answered as final.

I see you have max-width as 100% and width as 600. Flip those.

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.

 .image600{
     width:100%;
     max-width:600px;
 }

     <img src="image.png" class="image600">
7

The problem is that img tag is inline element and you can't restrict width of inline element.

So to restrict img tag width first you need to convert it into a inline-block element

img.Image{
    display: inline-block;
}
1
  • That is not necessary in my experience. max-width works for me on its own. Even though the logic of not restricting inline elements width seems valid. Jul 18 at 9:34
3

Given your container width 600px.

If you want only bigger images than that to fit inside, add: CSS:

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

If you want ALL images to take the avaiable (600px) space:

#ImageContainer img {
    width: 600px;
}
1
  • Also, comments on the OP indicate that you are using a wrong id on the CSS file: div#ImageContainer is not the same as the <div id="ImageContainerr"> May 20, 2016 at 9:04
1

Try this

 div#ImageContainer { width: 600px; }
 #ImageContainer img{ max-width: 600px}
1
  • 1
    That is not correct. Your selector means "an img element inside an Image element".
    – Mr Lister
    Jun 18, 2012 at 8:15
1

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">

img.Image { max-width: 100%; display: block; }
div#ImageContainer { width: 600px; }
<div id="ImageContainer">
    <img src="http://placehold.it/1000x600" class="Image">
</div>

-2

Wrap the element in a div with the fixed width/height:

<div style="width: 600px;">
  <img src="whatever" />
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.