Bootstrap to achieve rounded, round head and responsive picture _javascript skills

Bootstrap provides four styles for , 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> 
   
 </figure> 

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.

This article references from: http://www.runoob.com/bootstrap/bootstrap-images.html

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.