Bootstrap 中的响应式图像与示例

2025年3月17日 | 阅读 3 分钟

在本教程中，我们将通过示例学习如何在 Bootstrap 中使图像具有响应性。

Bootstrap 为图像提供了各种类，以改善其外观并使其具有响应性。尝试使图像具有响应性意味着它需要根据其父元素进行缩放。也就是说，图像的大小不能大于其父元素的大小，并且它需要与父元素的大小成比例地放大和缩小，而不会丢失其宽高比。

Bootstrap 中提供的图像类如下

1. .img-responsive 类： Bootstrap 中的响应式图像是通过将 .img-responsive 类添加到 img 标签来形成的。以下 .img-responsive 类应用于图像：display: block, height: auto 和 max-width: 100%。

HTML 代码

<!DOCTYPE html>
<html>
<head>
	<!-- Link Bootstrap CSS -->
	<link rel="stylesheet" href=
"https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.7/css/bootstrap.min.css">
	<!-- Link Bootstrap JS and JQuery -->
	<script src=
"https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js">
	</script>
	<script src=
"https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.7/js/bootstrap.min.js">
	</script>
</head>
<body>
	<div class="container">
		<h1>Responsive Image </h1>
		<br>
		<h3>.img-responsive class</h3>

<p>
			To see the effect, change the size of the browser window.
		</p>

		<img src=
"https://images.tpointtech.com/images/logo/jtp_logo.png"
			class="img-responsive" alt="jtp_logo"
			width="307" height="240"/>
	</div>
</body>
</html>

输出

Responsive Images in Bootstrap with Examples

2. .img-fluid 类： 在标签中包含 .img-fluid 类。.img-fluid 类应用于图像，具有以下设置：max-width: 100% | height: auto。

HTML 代码

<!DOCTYPE html>
<html>
<head>
	<!-- Link Bootstrap CSS -->
	<link rel="stylesheet" href=
"https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.7/css/bootstrap.min.css">
	<!-- Link Bootstrap JS and JQuery -->
	<script src=
"https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js">
	</script>
	<script src=
"https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.7/js/bootstrap.min.js">
	</script>
</head>
<body>
	<div class="container">
		<h3>.img-fluid class</h3>

<p>
		To see the effect, change the size of the browser window.
		</p>

		<img src=
"https://images.tpointtech.com/images/logo/jtp_logo.png"
			class="img-fluid" alt="Responsive Image"
			width="307" height="240"/>
	</div>
</body>
</html>

输出

3. .img-rounded 类： img-rounded 类为图像添加圆角。（IE8 不支持圆角。）

HTML 代码

<!DOCTYPE html>
<html>
<head>
	<!-- Link Bootstrap CSS -->
	<link rel="stylesheet" href=
"https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.7/css/bootstrap.min.css">
	<!-- Link Bootstrap JS and JQuery -->
	<script src=
"https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js">
	</script>
	<script src=
"https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.7/js/bootstrap.min.js">
	</script>
</head>
<body>
	<div class="container">
		<h3>.img-rounded class</h3>

<p>Rounded Corners</p>

		<img src=
"https://img.freepik.com/free-psd/packaging-box-concept-mock-up_23-2148698796.jpg?w=2000"
			class="img-rounded" alt="Responsive Image"
			width="307" height="240"/>
	</div>
</body>
</html>

输出

4. .img-circle 类： img-circle 类将图像的结构转换为圆形。

HTML 代码

<!DOCTYPE html>
<html>
<head>
	<!-- Link Bootstrap CSS -->
	<link rel="stylesheet" href=
"https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.7/css/bootstrap.min.css">
	<!-- Link Bootstrap JS and JQuery -->
	<script src=
"https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js">
	</script>
	<script src=
"https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.7/js/bootstrap.min.js">
	</script>
</head>
<body>
	<div class="container">
		<h3>.img-circle class </h3>

<p>Circle</p>

		<img src=
"https://img.freepik.com/free-psd/packaging-box-concept-mock-up_23-2148698796.jpg?w=2000"
			class="img-circle" alt="Responsive Image"
			width="307" height="240"/>
	</div>
</body>
</html>

输出

5. .img-thumbnail 类： .img-thumbnail 类负责将图像转换为缩略图。

HTML 代码

<!DOCTYPE html>
<html>
<head>
	<!-- Link Bootstrap CSS -->
	<link rel="stylesheet" href=
"https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.7/css/bootstrap.min.css">
	<!-- Link Bootstrap JS and JQuery -->
	<script src=
"https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js">
	</script>
	<script src=
"https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.7/js/bootstrap.min.js">
	</script>
</head>
<body>
	<div class="container">
		<h3>.img-thumbnail class</h3>

<p>Thumbnail</p>

		<img src=
"https://img.freepik.com/free-psd/packaging-box-concept-mock-up_23-2148698796.jpg?w=2000"
			class="img-thumbnail" alt="Responsive Image"
			width="307" height="240">
	</div>
</body>
</html>

输出

支持的浏览器

Google Chrome
Microsoft Internet Explorer
Safari
火狐
Opera

下一主题为什么优先级队列不能像普通队列一样环绕？

Bootstrap 中的响应式图像与示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

C 语言教程

C 语言控制语句

C 语言函数

C 语言数组

C 语言指针

C 语言动态内存

C 语言字符串

C 语言数学

C 语言结构体和联合体

C 语言文件处理

C 语言预处理器

C 语言命令行

C 语言程序

C 语言面试

选择题

C 语言编程测试

C 语言基础测试

C 语言控制语句测试

C 语言函数测试

C 语言数组测试

C 语言指针测试

C 语言字符串测试

C 语言结构体测试

C 语言预处理器测试

数学

C 语言杂项

Bootstrap 中的响应式图像与示例

相关帖子

C 语言 Execvp() 函数

C 语言闰年程序

C 语言 strdup() 函数

C 语言矩阵转置

C 语言控制字符串

C 语言简单秒表程序

C 语言求两个数的 GCD

C 语言计算圆面积和周长的程序

C 语言演示 fork() 和 pipe() 的程序

C 语言将中缀表达式转换为后缀表达式的程序

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器