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    lt div id  ImageContainerr  gt       lt img src  DisplayImage do ad id   requestScope advert id   class  Image    gt   lt  div gt    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

User · Answer

Your css is almost correct  You are just missing display  block  in image css  Also one typo in your id  It should be  lt div id  ImageContainer  gt    x000D   x000D  img Image   max-width  100   display  block    x000D  div ImageContainer   width  600px    x000D   lt div id  ImageContainer  gt  x000D       lt img src  http   placehold it 1000x600  class  Image  gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Try this   div ImageContainer   width  600px      ImageContainer img  max-width  600px

User · Answer

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         lt img src  image png  style  max-width 600px width 100   gt    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            lt img src  image png  class  image600  gt

User · Answer

You can write like this   img      width 100       max-width 600px      Check this http   jsfiddle net ErNeT

User · Answer

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

User · Answer

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

[html] How to set max width of an image in CSS

Examples related to html

Examples related to css

Examples related to image

Examples related to image-resizing