How to set image shape in bootstrap4

Rounded corner picture

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

Example

<img class="rounded lazy"  src="/static/imghw/default1.png"  data-src="cinqueterre.jpg"    alt="Cinque Terre">

Ellipse picture

.rounded-circle class can set an elliptical picture :

Example

<img class="rounded-circle lazy"  src="/static/imghw/default1.png"  data-src="cinqueterre.jpg"    alt="Cinque Terre">

Related recommendations: "bootstrap Getting Started Tutorial"

Thumbnail

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

Instance

<img class="img-thumbnail lazy"  src="/static/imghw/default1.png"  data-src="cinqueterre.jpg"    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  class="float-left lazy"  src="/static/imghw/default1.png"  data-src="paris.jpg"    alt="How to set image shape in bootstrap4" > <img  class="float-right lazy"  src="/static/imghw/default1.png"  data-src="cinqueterre.jpg"    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 lazy"  src="/static/imghw/default1.png"  data-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!