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:
The results are as follows:
The following classes are available to any image.
|.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-responsive||Pictures Responsive (will scale well to the parent element)||try it|
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: