What are the image styles in bootstrap?

There are four image styles in bootstrap: 1. “.img-rounded”, rounded image style; 2. “.img-circle”, circular image style; 3. “.img-thumbnail” , thumbnail style; 4. ".img-responsive", responsive image style.

The operating environment of this tutorial: Windows 7 system, bootsrap version 3.3.7, DELL G3 computer

Bootstrap provides four types of

• .img-rounded: rounded corners (not supported by IE8), add border-radius:6px to obtain image rounded corners ;

• .img-circle: Circle (not supported by IE8), add border-radius:50% to make the entire image circular.

• .img-thumbnail: Thumbnail function, add some padding and a gray border.

• .img-responsive: Image responsive (will scale well to parent elements).

Use:

Add the class style directly to class:

<img class="img-circle" src="img.jpg" alt="头像"/>

From the picture You can see the effects obtained by using various styles, and it is very simple and convenient to process pictures. Sometimes according to needs, for example, when we need to use a circular avatar with inner margins and gray borders, we can superimpose the two styles of circle and thumbnail. The effect is as shown in the figure above circle thumbnail.

img-responsive makes our images responsive. The so-called responsiveness means that it changes as a certain element changes, thereby achieving an adaptive effect. The responsive two picture codes in the above picture are as follows:

<figure style="width: 150px;height: 150px;">  
            <figcaption>responsive(150*150)</figcaption>  
            <img class="img-responsive " src="img.jpg" alt="头像"/>  
 </figure>  
<figure style="width: 100px;height: 100px;">  
            <figcaption>responsive(100*100)</figcaption>  
            <img class="img-responsive " src="img.jpg" alt="头像"/>  
 </figure>

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

For more knowledge about bootstrap, please visit: bootstrap basic tutorial! !

The above is the detailed content of What are the image styles in bootstrap?. For more information, please follow other related articles on the PHP Chinese website!