Bootstrap中的响应式图像与实例

Bootstrap为图片提供了不同的类别，使其外观更好，也使其具有响应性。使图像响应意味着它应该根据它的父元素进行调整。也就是说，图像的大小不应溢出其父元素，而是根据其父元素的大小变化而增长或缩小，同时不失去其长宽比。

在Bootstrap中可用于图像的不同类，解释如下：

.img-responsive 类: Bootstrap中的响应式图像是通过在img标签上添加.img-responsive类来创建的。img-responsive类适用于。max-width: 100% | height:auto | display:block到图片上。

<!DOCTYPE html>
<html>
<head>
    <!-- Link Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Link Bootstrap JS and JQuery -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h1>Responsive Image </h1>
        <br>
        <h3>.img-responsive class</h3>
         
<p>
            Change the size of the browser window
            to see effect
        </p>
 
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/GG-2.png"
            class="img-responsive" alt="Responsive image"
            width="307" height="240"/>
    </div>
</body>
</html>

输出:

Bootstrap中的响应式图像与实例

.img-fluid类：在标签上添加.img-fluid类。.img-fluid类适用于:max-width: 100% | height: auto到图片上。

<!DOCTYPE html>
<html>
<head>
    <!-- Link Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Link Bootstrap JS and JQuery -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h3>.img-fluid class</h3>
         
<p>
            Change the size of the browser window
            to see effect.
        </p>
 
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/GG-2.png"
            class="img-fluid" alt="Responsive Image"
            width="307" height="240"/>
    </div>
</body>
</html>

输出:

Bootstrap中的响应式图像与实例

.img-rounded类：图片的圆角是由.img-rounded类添加的。(IE8不支持圆角)。

<!DOCTYPE html>
<html>
<head>
    <!-- Link Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Link Bootstrap JS and JQuery -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h3>.img-rounded class</h3>
         
<p>Rounded Corners</p>
 
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/GG-2.png"
            class="img-rounded" alt="Responsive Image"
            width="307" height="240"/>
    </div>
</body>
</html>

输出:

Bootstrap中的响应式图像与实例

.img-circle类：图片的形状被.img-circle类做成了一个圆形。(圆角不被IE8支持)。

<!DOCTYPE html>
<html>
<head>
    <!-- Link Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Link Bootstrap JS and JQuery -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h3>.img-circle class </h3>
         
<p>Circle</p>
 
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/GG-2.png"
            class="img-circle" alt="Responsive Image"
            width="307" height="240"/>
    </div>
</body>
</html>

输出:

Bootstrap中的响应式图像与实例

.img-thumbnail类：通过.img-thumbnail类，将图像塑造成一个缩略图。

<!DOCTYPE html>
<html>
<head>
    <!-- Link Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Link Bootstrap JS and JQuery -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
</head>
<body>
    <div class="container">
        <h3>.img-thumbnail class</h3>
         
<p>Thumbnail</p>
 
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/GG-2.png"
            class="img-thumbnail" alt="Responsive Image"
            width="307" height="240">
    </div>
</body>
</html>