How to set max width of an image in CSS

html css image image-resizing

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.

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?

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.

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

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

sandeep

You can write like this:

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

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

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.

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.

@Lollero first OP edit his question after my answer & can you explain what's wrong in my answer? thanks

This doesn't preserve aspect ratio in IE

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)

Merle_the_Pearl

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

Kamlesh Uikey

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

Leo Armentano

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

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

Krish

Try this

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

That is not correct. Your selector means "an img element inside an Image element".

Rhythm Ruparelia

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

jstaab

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

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

Follow WeChat

Success story sharing

Want to stay one step ahead of the latest teleworks?

Subscribe Now

相似问题

HuntsBot,a one-stop outsourcing task, remote job, product ideas sharing and subscription platform, which supports DingTalk, Lark, WeCom, Email and Telegram robot subscription. The platform will push outsourcing task requirements, remote work opportunities, product ideas to every subscribed user with timely, stable and reliable.

Platform

Support

Contact US

Any questions or suggestions during use, you can contact us in the following ways:

Email: huntsbot@xinbeitime.com