How can I resize an image to a percentage of itself with CSS?

by

I have 2 methods for you.

Method 1.

This method resize image only visual not it actual dimensions in DOM, and visual state after resize centered in middle of original size.

img {
  transform: scale(0.5);
}
<img src="https://via.placeholder.com/300x200" />

Browser support note: browsers statistics showed inline in css.

Method 2.

#wrap {
  overflow: hidden;
  position: relative;
  float: left;
}

#wrap img.fake {
  float: left;
  visibility: hidden;
  width: auto;
}

#img_wrap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#img_wrap img.normal {
  width: 50%;
}
<div id="wrap">
  <img class="fake" src="https://via.placeholder.com/300x200" />
  
  <div id="img_wrap">
    <img class="normal" src="https://via.placeholder.com/300x200/cccccc" />
  </div>
</div>

Note: img.normal and img.fake is the same image.
Browser support note: This method will work in all browsers, because all browsers support css properties used in method.

The method works in this way:

  1. #wrap and #wrap img.fake have flow
  2. #wrap has overflow: hidden so that its dimensions are identical to inner image (img.fake)
  3. img.fake is the only element inside #wrap without absolute positioning so that it doesn’t break the second step
  4. #img_wrap has absolute positioning inside #wrap and extends in size to the entire element (#wrap)
  5. The result of the fourth step is that #img_wrap has the same dimensions as the image.
  6. By setting width: 50% on img.normal, its size is 50% of #img_wrap, and therefore 50% of the original image size.

Leave a Comment