Resize image proportionally with CSS?

user_191083 0
Viewed 1707991

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.

image-resizing css html
18 Answers
<img style="width: 50%;" src="..." />

worked just fine for me ... Or am I missing something?

Edit: But see Shawn's caveat about accidentally upsizing.

user_941320

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_260

I believe this is the easiest way to do it, also possible using through the inline style attribute within the <img> tag.

.scaled
{
  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
}

<img src="flower.png" class="scaled">

or

<img src="flower.png" style="transform: scale(0.7);">
user_27941210

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:
<%= image_tag("#{current_user.image}", height: '50px', width: '50px') %>

user_76282320
Related