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/imghwm/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/imghwm/default1.png" data-src="cinqueterre.jpg" alt="How to set image shape in bootstrap4" >

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/imghwm/default1.png" data-src="cinqueterre.jpg" alt="How to set image shape in bootstrap4" >

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/imghwm/default1.png" data-src="paris.jpg" alt="How to set image shape in bootstrap4" > <img  class="float-right lazy" src="/static/imghwm/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 <img class="img-fluid lazy" src="/static/imghwm/default1.png" data-src="img_chania.jpg" alt="How to set image shape in bootstrap4" > tag.

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

Example

<img  class="img-fluid lazy" src="/static/imghwm/default1.png" data-src="img_chania.jpg" alt="How to set image shape in bootstrap4" >

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!