How to use the width Attribute In HTML
You can use the width attribute directly on the img tag to specify the desired width. The browser will automatically adjust the height to maintain the aspect ratio.
Example:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > How to force image resize and keep aspect ratio? </ title > < style > .resizable-image { display: block; margin: auto; } </ style > </ head > < body > < img src = "https://media.w3wiki.org/wp-content/uploads/20230427130955/CSS-Tutorial.webp" alt = "Resizable Image" class = "resizable-image" width = "600" > </ body > </ html > |
Output:
How to Force Image Resize and Keep Aspect Ratio in HTML ?
When working with images on the web, maintaining the aspect ratio is essential for a visually appealing and consistent presentation. This article explores various approaches to force image resize while preserving the aspect ratio in HTML, covering different methods based on your specific requirements.