![]() |
VOOZH | about |
Bootstrap 5 provides classes for responsive images, ensuring they scale appropriately within their parent elements, maintaining aspect ratio, and enhancing appearance across devices without overflowing.
Types of Images:
| Term | Description |
|---|---|
| Responsive images | Resize images according to parent element and screen sizes, maintaining aspect ratio. |
| Image thumbnails | Add a 1px rounded border around the image. Represents a smaller version of a larger image. |
| Aligning images | Set alignment of images using float or text alignment classes. .mx-auto can center block-level images. |
| Picture | <picture> element specifying multiple <source> elements for a specific <img>. |
Example 1: In this example, we will create a responsive image.
Output:
Example 2: In this example, we will create a thumbnail image.
Output:
👁 Image