How to set image shape in bootstrap4

Rounded corner picture

.rounded class allows the picture to display the rounded corner effect:

Example

<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">

Ellipse picture

.rounded-circle class can set an elliptical picture :

Example

<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">

Related recommendations: "bootstrap Getting Started Tutorial"

Thumbnail

.img-thumbnail class is used to set picture thumbnails (pictures have borders):

Instance

<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">

Picture alignment

Use the .float-right class to set the right alignment of the picture, and use the .float-left class to set the left alignment of the picture:

Example

<img  src="paris.jpg" class="float-left" alt="How to set image shape in bootstrap4" > <img  src="cinqueterre.jpg" class="float-right" alt="How to set image shape in bootstrap4" >

Responsive images

Images come in a variety of sizes , we need to automatically adapt according to the size of the screen.

We can set up responsive images by adding the .img-fluid class in the tag.

.img-fluid 类设置了 max-width: 100%; 、 height: auto; :

Example

<img class="img-fluid" src="img_chania.jpg" alt="Chania">

The above is the detailed content of How to set image shape in bootstrap4. For more information, please follow other related articles on the PHP Chinese website!