Bootstrap image
In this chapter, we will learn Bootstrap support for a picture. Bootstrap provides three can be applied to the image simple style class:
- .img-rounded:Addborder-radius: 6pxto get the picture fillet.
- .img-circle:addborder-radius: 50%to make the whole picture becomes circular.
- .img-thumbnail:Add some padding (padding) and a gray border.
Consider the following examples demonstrate:
Examples
<Img src = "/wp-content/uploads/2014/06/download.png" class = "img-rounded">
<Img src = "/wp-content/uploads/2014/06/download.png" class = "img-circle">
<Img src = "/wp-content/uploads/2014/06/download.png" class = "img-thumbnail">
try it"
The results are as follows:
<Img> class
The following classes are available to any image.
class | description | Examples |
---|---|---|
.img-rounded | Adding a picture fillet (IE8 does not support) | try it |
.img-circle | The picture becomes circular (IE8 does not support) | try it |
.img-thumbnail | Thumbnails | try it |
.img-responsive | Pictures Responsive (will scale well to the parent element) | try it |
Responsive image
By <img> tag to add .img-responsive image support class to make responsive design. Pictures will scale well to the parent element.
.img-responsive class max-width: 100%; and height: auto; style is applied on the image: