Can You Resize Images Proportionally Using CSS Alone?

Resizing Images Proportionally in CSS

Customizing the size of images is a common task in web development, and understanding how to do it using CSS is essential. This article explores a method to resize an image to a percentage of its original size, akin to shrinking it by half to 50%.

Applying "width: 50%;" to an image does not reduce its size relative to itself but rather in relation to its parent element, such as the . Can you resize the image proportionally using CSS alone?

Method 1: Visual Transformation

This method relies on CSS transformation to modify the visual appearance of the image without altering its actual dimensions in the DOM. The image appears centered after resizing.

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

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

The above is the detailed content of Can You Resize Images Proportionally Using CSS Alone?. For more information, please follow other related articles on the PHP Chinese website!