Bootstrap 4中使用的不同类型的图像形状和角部

在这篇文章中，我们将学习如何使用Bootstrap制作不同的图片形状，并通过实例了解其实现。Bootstrap为图像提供了不同的类，以使它们的外观更好，同时也使它们具有响应性。使图像具有响应性意味着它应该根据其父元素进行缩放。也就是说，图像的大小不应溢出其父元素，而是根据其父元素的大小变化而增长或缩小，同时不失去其长宽比。我们将讨论Bootstrap中为图像提供的不同类别。

在Bootstrap 4中，图像是用<img>标签以不同的形状和角显示的。这些形状和边角可以用类来实现。下面给出了bootstrap中可用于图像的不同形状和角落。

Rounded Corners
Circle
Thumbnail
Aligning Image

在这里，我们使用了Bootstrap 4的CDN链接，可以很容易地从他们的官方网站上获得。

Bootstrap CDN链接：

复制并粘贴给定的样式表<link>在<head>标签内，在所有其他CSS文件之前加载。

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”>

为了使用Javascript功能，我们可以使用下面的CDN链接来实现Javascript。

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>   
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js”></script>   
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>

我们将利用上述CDN链接来实现它，以制作不同形状的图像。

圆角：在圆角中，显示的图像将有其圆角。.rounded类将圆角添加到图像中。这个类与<img> 标签一起使用。

语法:

<img src="image_source" class="rounded" alt="description">

例子1：这个例子说明了Bootstrap中.rounded类的使用。

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1" />
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
</head>
  
<body>
    <center>
        <h1 class="text-success">GeeksForGeeks</h1>
        <h4 class="text-secondary">Rounded Corners</h4>
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211006064408/1.png" 
            class="rounded" alt="GFG" 
            width="150" height="150" />
    </center>
</body>
  
</html>

输出。在输出中显示的图像边角是圆的。

Bootstrap 4中使用的不同类型的图像形状和角部

圆形： .rounded-circle类用于创建圆形的图像。

语法:

<img src="image_source" class="rounded-circle" alt="description">

例子2：这个例子说明了Bootstrap中.rounded-circle类的使用。

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1" />
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
</head>
  
<body>
    <center>
        <h2 class="text-success">
            GeeksForGeeks
        </h2>
          
        <h4 class="text-secondary">
            Circle Image
        </h4>
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211006064408/1.png"
            class="rounded-circle" alt="GFG" 
            width="150" height="150" />
    </center>
</body>
  
</html>

输出：图像显示在输出中，是一个圆形图像。

Bootstrap 4中使用的不同类型的图像形状和角部

缩略图： 缩略图是一个小的图像，代表一个较大的图像。.img-thumbnail类是用来创建缩略图（有边框）的图像。

语法:

<img src="image_source" class="img-thumbnail" 
                        alt="description">

示例3：这个例子说明了Bootstrap中.img-thumbnail类的使用。

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1" />
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
</head>
  
<body>
    <center>
        <h2 class="text-success">
            GeeksForGeeks
        </h2>
          
        <h4 class="text-secondary">
            Thumbnail Image
        </h4>
          
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211006064408/1.png" 
            class="img-thumbnail" alt="GFG" 
            width="150" height="150" />
    </center>
</body>
  
</html>

输出：显示的图像被一个边框所包围。

Bootstrap 4中使用的不同类型的图像形状和角部

对准图像：它用于对准图像的左和右。.float-left和.float-right类是用来设置图像的左右对齐的。

语法:

<img src="image_source" class="float-left/float-right" 
                        alt="description">

示例4：本例说明了.float-left或.float-right类的使用，该类将用于设置Bootstrap中图片的左右对齐。

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1" />
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
</head>
  
<body>
    <center>
        <h2 class="text-success">
            GeeksForGeeks
        </h2>
          
        <h4 class="text-secondary">
            Aligning Image
        </h4>
          
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211006064408/1.png" 
            class="float-left" alt="GFG" 
            width="200" height="200" />
          
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20211006064408/1.png" 
            class="float-right" alt="GFG" 
            width="200" height="200" />
    </center>
</body>
 
</html>