Article directory
bootstrap images
In this chapter, we will learn about Bootstrap's image support. Bootstrap provides three classes for applying simple styles to images:
- .img-rounded: Add border-radius:6px to get rounded corners of the image.
- .img-circle: Add border-radius:50% to make the whole image a circle.
- .img-thumbnail: Adds some padding and a gray border.
Please see the example demonstration below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 图片</title>
<link rel="stylesheet" href="../css/bootstrap.css">
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</head>
<body>
<img src="../imges/daxiongmao.jpg" class="img-rounded">
<img src="../imges/daxiongmao.jpg" class="img-circle">
<img src="../imges/daxiongmao.jpg" class="img-thumbnail">
</body>
</html>
running result:
<img> class
The following classes can be used in any image.
| kind | describe |
|---|---|
| .img-rounded | Add rounded corners to pictures (IE8 does not support) |
| .img-circle | Turn the image into a circle (IE8 does not support) |
| .img-thumbnail | thumbnail function |
| .img-responsive | Images are responsive (will scale nicely to parent elements) |
responsive images
Make images responsive by adding the .img-responsive class to the <img> tag. The image will expand nicely to the parent element.
The .img-responsive class applies max-width: 100%; and height: auto; styles to images:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 图片</title>
<link rel="stylesheet" href="../css/bootstrap.css">
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</head>
<body>
<img src="../imges/daxiongmao.jpg" class="img-responsive" alt="Cinque Terre">
</body>
</html>
running result:
