Bootstrap Pictures


May 04, 2021 06:00 Bootstrap


Table of contents


Bootstrap Pictures

In this chapter, we'll learn about Bootstrap's support for pictures. Bootstrap offers three classes that can apply simple styles to pictures:

  • .img-rounded: Add border-radius:6px to get picture fillets.
  • .img-circle: Add border-radius: 500px to round the entire picture.
  • .img-thumbnail: Add some padding and a gray border.

Take a look at the example demonstration below:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 图片</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow" ></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow" ></script>
</head>
<body>

<img src="https://www.w3cschool.cn/statics/demosource/download.png" class="img-rounded">
<img src="https://www.w3cschool.cn/statics/demosource/download.png" class="img-circle">
<img src="https://www.w3cschool.cn/statics/demosource/download.png" class="img-thumbnail">

</body>
</html>

The result is as follows:

Bootstrap Pictures

the class of slt;img.gt;

The following classes can be used in any picture.

Class Describe Instance
.img-rounded Add fillets to pictures (IE8 does not support) Give it a try
.img-circle Turn a picture into a circle (IE8 does not support) Give it a try
.img-thumbnail Thumbnail functionality Give it a try
.img-responsive Picture responsiveness (extends well to parent elements) Give it a try

Responsive picture

Let the picture support responsive design by adding the .img-responsive class to the hashtag. The picture extends well to the parent element.

.img-responsive class max-width: 100%; A nd height: auto; Styles are applied to pictures:

< img src= "cinqueterre.jpg" class= "img-responsive" alt= "Cinque Terre" >

Try it out . . .

Tip: By using Bootstrap's picture response class.img-responsive, you can make the picture fit on your phone!