Image Resize Techniques in HTML5 & CSS

1. Fixed Size (HTML Attributes)

This method sets the image size using HTML width and height attributes.

Fixed Size Image

2. Fixed Size (CSS)

Here, CSS is used to define the image dimensions.

Fixed Size via CSS

3. Responsive Image

Using width: 100% and height: auto makes the image scale with its container.

Responsive Image

4. Maintain Aspect Ratio

Setting only the width and letting the height adjust automatically preserves the image's aspect ratio.

Aspect Ratio Maintained

5. Background Image Resizing

Using CSS background-size: cover to resize background images.