Bootstrap 5 图像
Bootstrap 2023-08-10 09:26:52小码哥的IT人生shichen
Bootstrap 5 图像
图像形状
圆角
.rounded 类为图像添加圆角：
示例代码：
<img src="flower.jpg" class="rounded" alt="Cinque Terre">
完整实例【亲自试一试】：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>圆角</h2>
<p>.rounded 类为图像添加圆角：</p>
<img src="/i/photo/flower-1.jpg" class="rounded" alt="Flower" width="600" height="400">
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
圆形
.rounded-circle 类将图像塑造为圆形：
示例代码：
<img src="flower.jpg" class="rounded-circle" alt="Cinque Terre">
完整实例【亲自试一试】：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>圆形</h2>
<p>.rounded-circle 类将图像塑造为圆形：</p>
<img src="/i/photo/flower-1.jpg" class="rounded-circle" alt="Flower" width="600" height="400">
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
缩略图
.img-thumbnail 类将图像塑造为缩略图（带边框）：
示例代码：
<img src="flower.jpg" class="img-thumbnail" alt="Cinque Terre">
完整实例【亲自试一试】：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>缩略图</h2>
<p>.img-thumbnail 类创建图像的缩略图：</p>
<img src="/i/photo/flower-1.jpg" class="img-thumbnail" alt="Flower" width="600" height="400">
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
对齐图像
使用 .float-start 类将图像向左浮动，或使用 .float-end 向右浮动：
示例代码：
<img src="tulip.jpg" class="float-start">
<img src="tulip.jpg" class="float-end">
完整实例【亲自试一试】：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>对齐图像</h2>
<p>使用浮动类将图像向左或向右浮动：</p>
<img src="/i/photo/tulip.jpg" class="float-start" alt="Tulip" width="300" height="300">
<img src="/i/photo/tulip-2.jpg" class="float-end" alt="Tulip" width="300" height="300">
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
居中图像
为了使图像居中，我们通过向图像添加了 utility 类 .mx-auto (margin:auto) 和 .d-block (display:block)：
示例代码：
<img src="tulip.jpg" class="mx-auto d-block">
完整实例【亲自试一试】：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>居中图像</h2>
<p>通过向图像添加实用程序类 .mx-auto (margin:auto) 和 .d-block (display:block) 来使图像居中：</p>
<img src="/i/photo/flower-1.jpg" class="mx-auto d-block" alt="Flower" style="width:50%">
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
响应式图像
图像有各种尺寸。屏幕也是如此。响应式图像会自动调整以适应屏幕尺寸。
通过将 .img-fluid 类添加到 <img> 标签来创建响应式图像。然后图像将很好地缩放到父元素内。
.img-fluid 类为图像应用 max-width: 100%; 和 height: auto; ：
示例代码：
<img class="img-fluid" src="tiyugongyuan.jpg" alt="New York">
完整实例【亲自试一试】：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>响应式图像</h2>
<p>.img-fluid 类使图像可以很好地缩放到父元素（请调整浏览器窗口的大小来查看效果）：</p>
<img src="/i/photo/tiyugongyuan.jpg" class="img-fluid" alt="Park" width="2000" height="1085">
</div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
