Detailed description of Bootstrap's four image styles _ javascript skills

This article introduces Bootstrap's support for images. Bootstrap provides four classes that can apply simple styles to images, if you are interested in Bootstrap's four image classes, let's take a look at Bootstrap's support for images in this chapter. Bootstrap provides four classes that can apply simple styles to images:

Img-rounded Add border-radius: 6px to get the image rounded corner
Add border-radius: 50% to img-circle to make the entire image circular.
Add some padding and a gray border to the img-thumbnail
Img-responsive image response

1. img-rounded

     
    
    
    
    
    
    
    BootstrapDemo   
    
          
               
     

. Img-rounded {border-radius: 6px ;}

Effect:

2. img-circle

. Img-circle {border-radius: 50% ;}

Effect (because the width and height of this image are different, an elliptic is displayed. If the width and height are set to the same, a circle is displayed ):

3. img-thumbnail

. Img-thumbnail {display: inline-block; max-width: 100%; height: auto; padding: 4px; line-height: 1.42857143;
Background-color: # FFF; border: 1px solid # DDD; border-radius: 4px; transition: all 0.2 s allow-in-out ;}

Effect:

4. img-responsize

. Img-responsive {display: block; max-width: 100%; height: auto ;}

Effect (the width attribute value in img is ignored ):

The above content introduces the relevant knowledge of the Bootstrap four image styles in steps. I hope you will like it.