Bootstrap5 image shape
Rounded corner picture
.rounded class allows the picture to show a fillet effect:
Example
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
Ellipse picture
.rounded-circle class can set an oval picture:
Example
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
Thumbnail image
.img-thumbnail class is used to set the picture thumbnail (the picture has a frame):
Example
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
Picture alignment
Use .float-start class to set the left alignment of the picture, using the .float-end class sets the right alignment of the picture:
Example
<img src="paris.jpg" class="float-start">
<img src="cinqueterre.jpg" class="float-end">
The picture is centered
Use .mx-auto (margin:auto) and .d-block (display:block) class to set the picture center alignment:
Example
<img src="paris.jpg" class="mx-auto d-block">
Responsive picture
Images come in a variety of sizes and we need to adapt automatically according to the size of the screen.
We can pass through the <img> add to label .img-fluid class to setup responsive pictures.
.img-fluid class is set max-width: 100%; 、 height: auto; :
Example
<img class="img-fluid" src="img_chania.jpg" alt="Chania">