7.8.1. Rounded corner picture ¶
.rounded
class allows the picture to show a fillet effect:Example ¶
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
7.8.2. Ellipse picture ¶
.rounded-circle
class can set an oval picture:Example ¶
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
7.8.3. 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">
7.8.4. 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">
7.8.5. 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">
7.8.6. 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">