什么是 Bootstrap 4 中的图像缩略图？

原文:https://www . geeksforgeeks . org/什么是引导中的图像缩略图-4/

使用 < img > 标签显示引导程序 4 中的图像。在引导程序中，缩略图是图像周围的边框。它是使用创建的。img-缩略图类。

语法:

<img src="..." alt="...">

图像缩略图:在 Bootstrap 4 中，图像缩略图是被图像包围的边界。要创建此图像缩略图，您可以使用。缩略图类。

语法:

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

示例:

超文本标记语言

<!DOCTYPE html>
<html lang="en">

<head>
    <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">
    <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>
</head>

<body style="background-color:black">
    <center>
        <h1 style="color:green;">
          GeeksforGeeks
        </h1>
        <div class="container">
            <h2 style="color:white">
              Thumbnail
            </h2> 
          <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210929144017/geeksimage-200x145.png" 
               class="img-thumbnail" 
               alt="GFG" 
               width="200" 
               height="200"> 
      </div>
    </center>
</body>

</html>

输出:

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://moonapi.com/news/6897.html