Bootstrap IMG image Style (recommended) _javascript tips

Bootstrap provides four styles for classes, respectively:

. img-rounded: Rounded corners (IE8 not supported), add border-radius:6px to get picture fillet;

. Img-circle: Round (IE8 not supported), add border-radius:50% to make the entire picture rounded.

. Img-thumbnail: Thumbnail feature, add some inner margin (padding) and a gray border.

. img-responsive: Picture response (will well extend to parent element).

Use:

Adding a class style directly to class allows you to:

The effect is as follows:

You can see the effect of using a variety of styles from the diagram, and it's very easy to handle the pictures. Sometimes the circle and thumbnail two styles can be superimposed using a circular avatar with an inner margin and a gray border, as shown in the circle thumbnail above.

Img-responsive makes our pictures responsive. The so-called response, is the change, with a certain element changes, so as to achieve adaptive effect. The responsive two picture codes in the above illustration are as follows:

<figure style= "width:150px;height:150px;" > 
      <figcaption>responsive (150*150) </figcaption> 
       
 </figure> 
<figure style=" width:100px;height:100px; > 
      <figcaption>responsive (100*100) </figcaption> 
       
 

Here we do not set the size of the picture, but set the size of the element figure that wraps it, whether figure is 150px*150px or 100px*100px, the picture can be extended well to the parent element figure.

If you decide that the above description is not detailed enough, you can refer to the following:

Detailed bootstrap four kinds of picture styles

Bootstrap 3 's box-sizing style causes the Ueditor control's picture to not scale properly

The above is a small set to introduce the bootstrap IMG image style, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!