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!