极客教程Bootstrap 4图像
Bootstrap为图片提供了不同的类别，使其外观更好，也使其具有响应性。使图像具有响应性意味着它应该根据它的父元素进行调整。也就是说，图像的大小不应溢出其父元素，并将根据其父元素的大小变化而增长或缩小，而不失去其长宽比。
Bootstrap中为图像提供的不同类别解释如下。
响应式图像： .img-fluid类在<img> 标签中被用来创建响应式图像。响应式图像是用来自动调整图像到指定的框中。
语法:
<img src="image_source" class="img-fluid" ...>
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Images</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.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body style="text-align:center;">
<div class="container">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>Responsive Image</h2>
<img class="img-fluid" src=
"https://media.geeksforgeeks.org/wp-content/uploads/GG-2.png"
alt="Responsive image" width="667" height="440"/>
</div>
</body>
</html>
输出:
圆角图像： .rounded类用于创建一个圆角图像。该类与<img> 标签一起使用。
语法:
<img src="image_source" class="rounded" ...>
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Images</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.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body style="text-align:center;">
<div class="container">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>Rounded Corner Image</h2>
<img class="rounded" src=
"https://media.geeksforgeeks.org/wp-content/uploads/GG-2.png"
alt="Responsive image" width="367" height="340"/>
</div>
</body>
</html>
输出:
圆形图像： .rounded-circle类用于创建圆形图像。
语法:
<img src="image_source" class="rounded-circle" ...>
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Images</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.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body style="text-align:center;">
<div class="container">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>Circle Image</h2>
<img class="rounded-circle" src=
"https://media.geeksforgeeks.org/wp-content/uploads/GG-2.png"
alt="Responsive image" width="467" height="340"/>
</div>
</body>
</html>
输出:
** 缩略图：** .img-thumbnail类用于创建一个缩略图（有边框）。
语法:
<img src="image_source" class="img-thumbnail" ...>
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Images</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.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body style="text-align:center;">
<div class="container">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>Thumbnail Image</h2>
<img class="img-thumbnail" src=
"https://media.geeksforgeeks.org/wp-content/uploads/GG-2.png"
alt="Responsive image" width="467" height="340"/>
</div>
</body>
</html>
输出:
对齐图像： .float-left和.float-right类用于设置图像的左和右对齐。
语法:
<img src="image_source" class="float-left/float-right" ...>
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Images</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.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body style="text-align:center;">
<div class="container">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>Aligning Image</h2>
<!-- Bootstrap float-left class -->
<img class="float-left" src=
"https://media.geeksforgeeks.org/wp-content/uploads/GG-2.png"
alt="Responsive image" width="250" height="250"/>
<!-- Bootstrap float-right class -->
<img class="float-right" src=
"https://media.geeksforgeeks.org/wp-content/uploads/GG-2.png"
alt="Responsive image" width="250" height="250"/>
</div>
</body>
</html>
输出:
图像居中： .mx-auto (margin:auto)和.d-block (display:block)类用于将图像设置为中心。
语法:
<img src="image_source" class="mx-auto d-block" ...>
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Images</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.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h1 style="color:green;text-align:center;">
GeeksforGeeks
</h1>
<h2 style="text-align:center;">Centered Image</h2>
<img class="mx-auto d-block" src=
"https://media.geeksforgeeks.org/wp-content/uploads/GG-2.png"
alt="Responsive image" width="350" height="250"/>
</div>
</body>
</html>
输出:
支持的浏览器:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari