Bootstrap Pictures
May 04, 2021 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:
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:
Tip: By using Bootstrap's picture response class.img-responsive, you can make the picture fit on your phone!