How to set max width of an image in CSS

Question

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

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 '12 at 08:02
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 '12 at 08: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. — user1315305, Jun 18 '12 at 08:21
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 '12 at 08:24
***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 01 '15 at 16:46
Look my example: [jsfiddle](http://jsfiddle.net/4cZtN/). Everything is working. If the image is larger than 600 px, then it resized. You made a mistake in the name of the class ImageContainer in html. — Xella, Jun 18 '12 at 08:44
Intresting thing about set `max-width` for image tags with presentage, is that "browser calculation is based on the original size of the image, not the container". In your case, `img.Image { max-width: 100%;}` (100%) **means 100% of the original image's size** meanwhile you expect to be "100% of the container `div`" — Rzassar, Mar 28 '18 at 18:17

score 165 · Answer 1 · answered Jun 18 '12 at 08:09

165

You can write like this:

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

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

answered Jun 18 '12 at 08:09

sandeep

91,313
23
137
155

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. – user1315305 Jun 18 '12 at 08:11
@user1315305 Look at your original example. The typo causes the CSS for the div to not match. – Mr Lister Jun 18 '12 at 08:18
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 '12 at 08:30
It's not what the op wants..? What op wants is exactly what he tried to do, he just had a typo that forced his code to not work. – Joonas Jun 18 '12 at 08:33
1

@Lollero first OP edit his question after my answer & can you explain what's wrong in my answer? thanks – sandeep Jun 18 '12 at 08:36
Your answer is not what the OP wants? That's not an answer worth any up votes. Even if you answered before he edited, so what? Your answer is wrong. – Joonas Jun 18 '12 at 08:39
3

This doesn't preserve aspect ratio in IE – Cocowalla Jan 19 '13 at 12:42
Thanks for this answer, its the best one and the information you present is useful to me (I dont care about IE support either). – woody121 Jan 21 '14 at 18:30
i have a doubt! can we give image width more than 100%??? like.....img{width:120%;} – Nag Apr 15 '16 at 04: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) – Jon Schneider Sep 22 '17 at 13:38

score 21 · Answer 2 · answered Jul 16 '19 at 16:38

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

score 7 · Answer 3 · answered Jan 23 '17 at 16:32

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;
}

answered Jan 23 '17 at 16:32

Kamlesh Uikey

81
1
2

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. – David Pierson Jul 18 '23 at 09:34

score 3 · Answer 4 · answered Feb 02 '16 at 11:12

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;
}

answered Feb 02 '16 at 11:12

Leo Armentano

111
1
4

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
– Leo Armentano May 20 '16 at 09:04

Krish · Answer 5 · 2012-06-18T09:58:23.137

1

Try this

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

edited Jun 18 '12 at 09:58

answered Jun 18 '12 at 08:11

Krish

2,590
8
42
62

1

That is not correct. Your selector means "an img element inside an Image element". – Mr Lister Jun 18 '12 at 08:15

score 1 · Answer 6 · answered Aug 17 '16 at 06:08

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>

score -2 · Answer 7 · answered Feb 02 '22 at 04:44

-2

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

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

answered Feb 02 '22 at 04:44

jstaab

3,449
1
27
40

How to set max width of an image in CSS

7 Answers7

Linked