Setting Width and Height as Percentages in HTML: Correct Approaches to Avoid Image Distortion

Specification Analysis of Percentage-Based Image Dimensions in HTML

In HTML development practice, many developers attempt to use percentage values directly in the width and height attributes of <img> elements, expecting proportional image scaling. However, this behavior is actually not supported in current HTML specifications. According to the latest HTML standards, the width and height attributes of <img> elements only accept pixel values or valid numbers, not percentage values.

Historical Specification Evolution and Browser Compatibility

It's worth noting that HTML 4.01 specification once allowed percentage values in <img> attributes, but this feature has been deprecated in subsequent HTML5 specifications. Modern browsers typically tolerate this non-standard usage for backward compatibility, but this doesn't mean it's a recommended practice. When developers write code like:

<img src="#" width="50%" height="50%">

The browser actually interprets these percentage values as relative to the dimensions of the element containing the image, not relative to the image's original dimensions. This misunderstanding often leads to image aspect ratio distortion and visual quality degradation.

Practical Impact of Container Relativity

To better understand this mechanism, consider the following example scenario:

<div style="width: 1000px; height: 600px;">
    <img src="#" width="50%" height="50%">
</div>

In this case, the actual rendered dimensions of the image will be 500 pixels wide and 300 pixels high, completely dependent on the container's dimensions and independent of the image's original size. If the container's aspect ratio doesn't match the image's original aspect ratio, the image will be stretched or compressed, resulting in visual distortion.

CSS background-size as an Alternative Solution

As a more modern alternative, CSS's background-size property offers more flexible and controllable image scaling mechanisms. This property supports multiple value types, including:

background-size: contain;
background-size: cover;
background-size: 50%;
background-size: 200px 100px;

The contain value ensures the image displays as large as possible within the container while maintaining its original proportions, while the cover value ensures the image completely covers the container, potentially with appropriate cropping. These values can achieve responsive layouts while preserving image proportions.

Calculation Rules for background-size

The calculation logic of the background-size property is based on the image's intrinsic dimensions and proportions. For bitmap images with intrinsic dimensions (such as JPG, PNG), browsers can accurately calculate scaled dimensions. For vector images (such as SVG), the situation is more complex, requiring consideration of attributes like preserveAspectRatio.

When using percentage values, background-size calculates relative to the background positioning area, typically determined by the background-origin property. This relative calculation mechanism allows background images to better adapt to containers of different sizes.

jQuery Dynamic Adjustment Solution

For scenarios requiring dynamic image size adjustment, jQuery can be used to achieve precise control:

$( "img" ).each( function() {
    var $img = $( this );
    $img.width( $img.width() * .5 );
});

This method directly manipulates the image's DOM properties, ensuring size adjustments are based on the image's actual dimensions rather than container dimensions. It's important to note that any existing percentage size attributes should be removed before using this method.

Single Dimension Percentage Setting

Another viable approach is to set percentage values for only one dimension, allowing the browser to automatically calculate the other dimension to maintain the original proportion:

<img src="#" height="50%">

While this method is simple, its effectiveness still depends on the container's dimensional characteristics and may not achieve desired results in certain layout scenarios.

Best Practice Recommendations

Based on the above analysis, the following best practices are recommended: For image scaling that requires maintaining proportions, prioritize using CSS's background-size property; For dynamic content, consider using JavaScript libraries for precise control; Avoid using percentage dimension attributes directly in <img> elements to ensure code standardization and maintainability.

By understanding these mechanisms and selecting appropriate solutions, developers can achieve high-quality image display effects in various responsive layout scenarios while ensuring code compliance with modern web standards.