Home > Developer > JavaScript
Describes the four image styles of Bootstrap,
In this chapter, we will learn how Bootstrap supports images. 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
<! Doctype html>. Img-rounded {border-radius: 6px ;}
Effect:
2. img-circle
<body style="padding: 20px;"> <div class = "container"> </div> </body>. 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
<body style="padding: 20px;"> <div class = "container"> </div> </body>. 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
<body style="padding: 20px;"> <div class = "container" style = "width:150px;"> </div> </body>. 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.
Articles you may be interested in:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
