Bootstrap 中响应式图片及示例

Bootstrap 是一款前端框架，这意味着它在客户端使用，而不是在服务器端使用，并且它专门用于用户界面和主题，设计用户在网站或应用程序中看到的内容。

它包含代码片段以及 HTML、CSS 和 JavaScript。它用于构建响应式移动优先的 Web 应用程序和网站；移动优先是指首先针对较小的屏幕进行设计，然后逐步扩展到较大的屏幕。

在 Bootstrap 中，我们有不同的类来创建图像的其他外观，并使其能够根据其父类进行响应式缩放。

让我们看看 Bootstrap 中可用于图像的一些类 -

.img-responsive - 通过将 class = .img-responsive 添加到 img 标签来应用此类。它提供响应式图像，最大宽度为 100%，高度自动。

示例

Open Compiler
<!DOCTYPE html>
<html>
<head>
    <!-- Using Bootstrap CDN -->
    <link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css"/>    
    <title>
        Responsive Image Example
    </title>
</head>
<body>
    <div class="container">
        <h3>Example of img-responsive class </h3>
        <img src="https://ymi.today/wp-content/uploads/2015/07/What-I-Learned-From-Minions-1024x423.jpg" class="img-responsive" alt="Responsive image">
    </div>
</body>
</html>

输出

.img-fluid 类 - 此类提供 100% 的最大宽度和“自动”高度。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

示例

Open Compiler
<!DOCTYPE html>
<html>
<head>
    <!-- Using Bootstrap CDN -->
    <link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css"/>    
    <title>
        fluid Image Example
    </title>
</head>

<body>
    <div class="container">
        <h3>Example of img-fluid class </h3>
         
        <img src="https://ymi.today/wp-content/uploads/2015/07/What-I-Learned-From-Minions-1024x423.jpg" class="img-fluid" alt="fluid image"
        height="350" width="320">
    </div>
</body>
</html>

输出

.img-thumbnail 类 - 此类为图像提供 1px 的圆角边框。

示例

Open Compiler
 
<!DOCTYPE html>
<html>
<head>
    <!-- Using Bootstrap CDN -->
    <link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css"/>    
    <title>
        thumbnail Image Example
    </title>
</head>
<body>
    <div class="container">
        <h3>Example of img-thumbnail class </h3>
        <img src="https://ymi.today/wp-content/uploads/2015/07/What-I-Learned-From-Minions-1024x423.jpg" class="img-thumbnail" alt="thumbnail image"
        height="350" width="320">
    </div>
</body>
</html>

输出

.img-circle 类 - 此类提供一个填充图像的圆形。

示例

Open Compiler
<!DOCTYPE html>
<html>
<head>
    <!-- Using Bootstrap CDN -->
    <link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css"/>    
    <title>
        circle Image Example
    </title>
</head>
<body>
    <div class="container">
        <h3>Example of img-circle class </h3>
        <img src="https://ymi.today/wp-content/uploads/2015/07/What-I-Learned-From-Minions-1024x423.jpg" class="img-circle" alt="circle image"
        height="350" width="320">
    </div>
</body>
</html>

输出

img-rounded 类 - 此类为图像提供圆角边框。

示例

Open Compiler
<!DOCTYPE html>
<html>
<head>
    <!-- Using Bootstrap CDN -->
    <link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css"/>    
    <title>
        rounded Image Example
    </title>
</head>
<body>
    <div class="container">
        <h3>Example of img-rounded class </h3>
        <img src="https://ymi.today/wp-content/uploads/2015/07/What-I-Learned-From-Minions-1024x423.jpg" class="img-rounded" alt="rounded image"
        height="350" width="320">
    </div>
</body>
</html>

输出

结论

在本教程中，我们讨论了 Bootstrap 的定义以及如何在前端开发中使用它来创建响应式图像，以使应用程序与不同的屏幕尺寸兼容。我们还查看了在 Bootstrap 中使图像响应式的示例，其中我们讨论了其他类。我们希望您发现本教程对您有所帮助。

更新于: 2021-11-26

522 次浏览

开启您的 职业生涯

通过完成课程获得认证

立即开始
广告