Bootstrap 5图像缩略图

Bootstrap 5图片缩略图用于在图片周围添加1px的圆形边框。缩略图是一个小尺寸的图像，代表一个较大的图像。

图片缩略图使用类：

.img-thumbnail:该类用于创建缩略图。该类在图像上增加了1px的圆形边框。

语法:

<img src="..." class="img-thumbnail" alt="...">

例子1：在这个例子中，我们将使用.img-thumbnail类来创建一个缩略图。

<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap 5 Images Thumbnails</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
  
        <h2>Bootstrap 5 Images Thumbnails</h2>
  
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
            class="img-thumbnail" alt="GFG">
    </div>
</body>
  
</html>

输出:

Bootstrap 5图像缩略图

例子2：在这个例子中，我们将使用.img-thumbnail和.rounded-circle类来创建一个圆形图像的缩略图。

<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap 5 Images Thumbnails</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
  
        <h2>Bootstrap 5 Images Thumbnails</h2>
  
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
            class="img-thumbnail rounded-circle" alt="GFG">
    </div>
</body>
  
</html>

输出:

Bootstrap 5图像缩略图