Home/ Questions/Q 8017195
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T20:46:17+00:00

I am trying to resize an image with a percentage of itself. For example,

  • 0

I am trying to resize an image with a percentage of itself. For example, I just want to shrink the image by half by resizing it to 50%. But applying width: 50%; will resize the image to be 50% of the container element (the parent element which maybe the <body> for example).

Question is, can I resize the image with a percentage of itself without using JavaScript or server side? (I have no direct information of the image size)

I am pretty sure you cannot do this, but I just want to see whether there are intelligent CSS only solution. Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.
    • 0