Resize image proportionally with CSS

Question

Is there a way to resize  scale down  images proportionally using ONLY CSS   I m doing the JavaScript way  but just trying to see if this is possible with CSS

User · Answer

If it s a background image  use background-size contain   Example css    your-div     background  url  image jpg   no-repeat    background-size contain

User · Answer

You always need something like this  html       width  100       height  100       at the top of your css file

User · Answer

img       max-width 100      div       width 100px      with this snippet you can do it in a more efficient way

User · Answer

Use this easy scaling technique   img       max-width  100       height  auto     media     img        width  auto     for ie 8

User · Answer

To scale an image by keeping its aspect ratio  Try this   img     max-width 100     height auto

User · Answer

The css properties max-width and max-height work great  but aren t supported by IE6 and I believe IE7  You would want to use this over height   width so you don t accidentally scale an image up  You would just want to limit the maximum height width proportionately

User · Answer

Notice that width 50  will resize it to 50  of the available space for the image  while max-width 50  will resize the image to 50  of its natural size  This is very important to take into account when using this rules for mobile web design  so for mobile web design max-width should always be used  UPDATE  This was probably an old Firefox bug  that seems to have been fixed by now

User · Answer

We can resize image using CSS in the browser using media queries and the principle of responsive design        media screen and  orientation  portrait    img ri       max-width  80            x000D   x000D   media screen and  orientation  landscape    x000D    img ri   max-height  80     x000D    x000D   x000D   x000D

User · Answer

Revisited in 2015    lt img src  http   imageurl  style  width  auto  height  auto max-width  120px max-height  100px  gt    I ve revisited it as all common browsers now have working auto suggested by Cherif above  so that works even better as you don t need to know if image is wider than taller   older version  If you are limited by box of 120x100 for example you can do    lt img src  http   image url  height  100  style  max-width  120px  gt

User · Answer

Control size and maintain proportion     your-img       height  auto       width  auto       max-width  300px       max-height  300px

User · Answer

Try  transform  scale 0 5  0 5   -ms-transform  scale 0 5  0 5   -webkit-transform  scale 0 5  0 5

User · Answer

To resize the image proportionally using CSS   img resize       width 540px     you can use          height  auto

User · Answer

Try this   div container       max-width  200px   real picture size     max-height  100px        resize images    div container img       width  100       height  auto

User · Answer

I believe this is the easiest way to do it  also possible using through the inline style attribute within the  lt img gt  tag    scaled     transform  scale 0 7      Equal to scaleX 0 7  scaleY 0 7         lt img src  flower png  class  scaled  gt    or   lt img src  flower png  style  transform  scale 0 7    gt

User · Answer

You can use object-fit property    my-image       width  100px      height  100px      object-fit  contain      This will fit image  without changing the proportionally

User · Answer

img      max-width 100       object-fit  scale-down      works for me  It scales down larger images to fit in the box  but leaves smaller images their original size

User · Answer

image tag   icons icon gif   height   32   width   32   I need to set height   50px   width   50px  to image tag and this code works from first try note I tried all the above code but no luck so this one works and here is my code from my  nav html erb                                                                           lt    image tag    current user image     height   50px   width   50px     gt

User · Answer

lt img style  width  50    src         gt    worked just fine for me     Or am I missing something   Edit  But see Shawn s caveat about accidentally upsizing

[html] Resize image proportionally with CSS?

Examples related to html

Examples related to css

Examples related to image-resizing