Resizing an Image to a Percentage of Itself Exclusively with CSS

In the realm of web designing, the need to resize images to specific dimensions arises frequently. One scenario involves reducing the size of an image to a percentage of its original size, without altering the size of its container element. While JavaScript or server-side scripting offers solutions, this article explores potential CSS-only alternatives.

Is it Possible to Resize an Image Using CSS Percentages?

At present, there is no direct CSS property that allows for resizing an image based on its own size. However, there are two ingenious methods that can achieve this effect:

Method 1: Visual Resizing with Transformation

This method visually reduces the size of an image without affecting its actual dimensions. The technique uses the 'transform: scale()' property to shrink the image by a specified percentage. The image remains centered within its original dimensions.

Example:

img {
  transform: scale(0.5);
}