极客教程Bootstrap 5图像
Bootstrap 5 Images内容使用了不同的类，使图片的外观更好，也使它们具有响应性。使图像具有响应性意味着它应该根据其父元素进行缩放。也就是说，图像的大小不应溢出其父元素，并将根据其父元素的大小变化而增长或缩小，而不失去其长宽比。
图像的类型：
- 响应式图像。响应式图像是用来根据其父元素和屏幕尺寸调整图像的大小。这意味着，图像的大小不应溢出其父元素，并将根据其父元素的大小变化而增长和缩小，而不失去其长宽比。
- 图像缩略图。图片缩略图是用来在图片周围添加1px的圆角边框。缩略图是一个小尺寸的图像，代表一个大图像。
- 对齐图像。对齐图像是用来给图像设置对齐方式的。我们将使用浮动或文本对齐类来设置图像的对齐。我们可以使用.mx-auto margin utility类来使块级图像居中。
- 图片。图片图像用于设置
<picture>元素，<source>为一个特定的<img>，指定多个<source>元素
例子1：在这个例子中，我们将创建一个响应式的图像。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 5 Images</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</h2>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182259/BootstrapTutorial.png"
class="img-fluid" alt="GFG">
</div>
</body>
</html>
输出:
例子2：在这个例子中，我们将创建一个缩略图。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 5 Images</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</h2>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
class="img-thumbnail" alt="GFG">
</div>
</body>
</html>
输出:
