Can you Resize an Image to a Percentage Within a Percentage Using Only CSS?

CSS Image Resizing: Achieving Percentages Within Percentages

Resizing an image to a percentage of its original dimensions can seem like a challenge with CSS alone. However, surprisingly, it is possible using two innovative methods.

Method 1: Visual Transformation

This method allows you to visually resize the image without altering its actual dimensions. The resulting image will be centered within its original size.

<code class="css">img {
  transform: scale(0.5);
}</code>

Applying this CSS to an image, such as the placeholder image below, will visually shrink it to 50% of its original size:

<code class="html"><img src="https://via.placeholder.com/300x200" /></code>

The above is the detailed content of Can you Resize an Image to a Percentage Within a Percentage Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!