Bootstrap 5 offers a variety of utility classes designed to manage image sizes, simplifying the process of adjusting image dimensions using CSS. Below are some effective methods for leveraging these classes.
Fixed Width and Height Utility Classes
Bootstrap 5 offers utility classes for width (w-*) and height (h-*), where * can be a percentage or a predefined size.
<!-- Image with 25% width of the parent -->
<img src="image.jpg" class="w-25" alt="Image">
<!-- Image with 50% width of the parent -->
<img src="image.jpg" class="w-50" alt="Image">
<!-- Image with 75% width of the parent -->
<img src="image.jpg" class="w-75" alt="Image">
<!-- Image with 100% width of the parent -->
<img src="image.jpg" class="w-100" alt="Image">
<!-- Image with 50% height of the parent -->
<img src="image.jpg" class="h-50" alt="Image">Bootstrap 5 Responsive Images
The img-fluid class scales images nicely to the parent element’s width.
<img src="http://via.placeholder.com/640x360.jpg" class="img-fluid" alt="Responsive Image">
Bootstrap 5 Thumbnail Image
To create a thumbnail with Bootstrap 5, use the img-thumbnail class. This adds a padding and a border around the image.
<img
src="https://cdn.pixabay.com/photo/2022/09/08/04/07/thumbnail-7439993_640.png"
class="img-thumbnail"
alt="Thumbnail Image"
/>
Bootstrap 5 Aligning Images
Apart from size, you might also want to align your images. Bootstrap 5 provides classes like float-start, float-end, and mx-auto (for center alignment) that can be used.
<!-- Float an image to the left -->
<img src="image.jpg" class="float-start" alt="Float Left">
<!-- Float an image to the right -->
<img src="image.jpg" class="float-end" alt="Float Right">
<!-- Center an image -->
<img src="image.jpg" class="mx-auto d-block" alt="Center">Notes:
1. Replace image.jpg with the actual path to your image.
2. These classes can be combined to achieve desired effects, like class=”img-fluid w-50″ to make an image responsive and 50% width of its parent.
3. Always ensure your image sizes are chosen appropriately for your layout and design requirements.
Bootstrap 5 Image Aspect Ratio
Bootstrap 5 provides utilities for maintaining an aspect ratio. This can be particularly useful for responsive designs where you want the image to maintain a certain shape regardless of its actual size.
<div class="ratio ratio-16x9">
<img src="path/to/image.jpg" class="img-fluid" alt="16:9 Aspect Ratio Image">
</div>You can also other aspect ratio.
<div class="ratio ratio-1x1">
<div>1x1</div>
</div>
<div class="ratio ratio-4x3">
<div>4x3</div>
</div>
<div class="ratio ratio-16x9">
<div>16x9</div>
</div>
<div class="ratio ratio-21x9">
<div>21x9</div>
</div>Bootstrap 5 Image with Max Width and Rounded Corners
Sometimes, you may want to set a maximum width for your image while also adding a stylistic touch like rounded corners.
<img
src="https://cdn.pixabay.com/photo/2023/02/14/23/57/sunset-7790622_640.jpg"
class="img-fluid rounded-3"
style="max-width: 300px"
alt="Max 300px Wide Image"
/>
Bootstrap 5 offers utility classes for controlling image sizes via CSS. img-fluid ensures responsiveness, rounded-3 adds rounded corners, and style="max-width: 300px;" sets a maximum width of 300 pixels.
