How to create a Responsive Image in Bootstrap?

In Bootstrap, creating a responsive image is straightforward and ensures that the image scales appropriately based on the size of the viewport.

Syntax

<img src="image.jpg" class="img-fluid" alt="Responsive image">

Explanation:

• The img-fluid class in Bootstrap is used to make an image responsive.
• When applied to an <img> element, it ensures that the image scales fluidly within its parent container, adjusting its width while maintaining its aspect ratio.
• It’s important to include the alt attribute for accessibility purposes, providing a textual description of the image content.

Example

<div class="container">
    <img src="image.jpg" class="img-fluid" alt="Responsive image">
</div>

Features

• Fluid Sizing: The img-fluid class ensures that the image scales proportionally with its parent container, regardless of the screen size or device type.
• Optimized Viewing: Responsive images enhance user experience by ensuring that images are displayed optimally across various devices, from desktops to mobile devices.
• Improved Performance: By scaling images appropriately, responsive design reduces unnecessary bandwidth usage and ensures faster loading times.
• Accessibility: Including the alt attribute provides alternative text for screen readers and improves accessibility for users with disabilities.