Resize image proportionally with CSS?

codingbear Source

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.

htmlcssimage-resizing

Answers

answered 9 years ago Adrien #1

<img style="width: 50%;" src="..." />

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

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

answered 9 years ago Shawn #2

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.

answered 8 years ago Mkk #3

To resize the image proportionally using CSS:

img.resize {
    width:540px; /* you can use % */
    height: auto;
}

answered 7 years ago PetrV #4

Revisited in 2015:

<img src="http://imageurl" style="width: auto; height: auto;max-width: 120px;max-height: 100px">

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

<img src="http://image.url" height="100" style="max-width: 120px">

answered 6 years ago Cherif #5

Control size and maintain proportion :

#your-img {
    height: auto; 
    width: auto; 
    max-width: 300px; 
    max-height: 300px;
}

answered 5 years ago Lenin Zapata P #6

img {
    max-width:100%;
}

div {
    width:100px;
}

with this snippet you can do it in a more efficient way

answered 5 years ago andreszs #7

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.

answered 5 years ago Prasanth K C #8

To scale an image by keeping its aspect ratio

Try this,

img {
  max-width:100%;
  height:auto;
}

answered 5 years ago lenooh #9

If it's a background image, use background-size:contain.

Example css:

#your-div {
  background: url('image.jpg') no-repeat;
  background-size:contain;
}

answered 5 years ago orome #10

Try

transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-webkit-transform: scale(0.5, 0.5);

answered 4 years ago MikeStr #11

You always need something like this

html
{
    width: 100%;
    height: 100%;
}

at the top of your css file

answered 4 years ago Geniusknight #12

Use this easy scaling technique

img {
    max-width: 100%;
    height: auto;
}
@media {
  img { 
    width: auto; /* for ie 8 */
  }
}

answered 3 years ago ovod #13

Try this:

div.container {
    max-width: 200px;//real picture size
    max-height: 100px;
}

/* resize images */
div.container img {
    width: 100%;
    height: auto;
}

answered 2 years ago Andrii Bogachenko #14

You can use object-fit property:

.my-image {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

This will fit image, without changing the proportionally.

answered 1 year ago pheon #15

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.

answered 1 year ago Moh K #16

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

@media screen and (orientation: landscape) {
  img.ri { max-height: 80%; }
}

answered 9 months ago neo7 #17

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') %>

answered 3 months ago cREcker #18

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

comments powered by Disqus