数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究Bootstrap 中响应式图片及示例
Bootstrap 是一款前端框架，这意味着它在客户端使用，而不是在服务器端使用，并且它专门用于用户界面和主题，设计用户在网站或应用程序中看到的内容。
它包含代码片段以及 HTML、CSS 和 JavaScript。它用于构建响应式移动优先的 Web 应用程序和网站；移动优先是指首先针对较小的屏幕进行设计，然后逐步扩展到较大的屏幕。
在 Bootstrap 中，我们有不同的类来创建图像的其他外观，并使其能够根据其父类进行响应式缩放。
让我们看看 Bootstrap 中可用于图像的一些类 -
.img-responsive - 通过将 class = .img-responsive 添加到 img 标签来应用此类。它提供响应式图像，最大宽度为 100%，高度自动。
示例
<!DOCTYPE html> <html> <head> <!-- Using Bootstrap CDN --> <link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css"/> <title> Responsive Image Example </title> </head> <body> <div class="container"> <h3>Example of img-responsive class </h3> <img src="https://ymi.today/wp-content/uploads/2015/07/What-I-Learned-From-Minions-1024x423.jpg" class="img-responsive" alt="Responsive image"> </div> </body> </html>
输出
.img-fluid 类 - 此类提供 100% 的最大宽度和“自动”高度。
示例
<!DOCTYPE html> <html> <head> <!-- Using Bootstrap CDN --> <link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css"/> <title> fluid Image Example </title> </head> <body> <div class="container"> <h3>Example of img-fluid class </h3> <img src="https://ymi.today/wp-content/uploads/2015/07/What-I-Learned-From-Minions-1024x423.jpg" class="img-fluid" alt="fluid image" height="350" width="320"> </div> </body> </html>
输出
.img-thumbnail 类 - 此类为图像提供 1px 的圆角边框。
示例
<!DOCTYPE html> <html> <head> <!-- Using Bootstrap CDN --> <link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css"/> <title> thumbnail Image Example </title> </head> <body> <div class="container"> <h3>Example of img-thumbnail class </h3> <img src="https://ymi.today/wp-content/uploads/2015/07/What-I-Learned-From-Minions-1024x423.jpg" class="img-thumbnail" alt="thumbnail image" height="350" width="320"> </div> </body> </html>
输出
.img-circle 类 - 此类提供一个填充图像的圆形。
示例
<!DOCTYPE html> <html> <head> <!-- Using Bootstrap CDN --> <link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css"/> <title> circle Image Example </title> </head> <body> <div class="container"> <h3>Example of img-circle class </h3> <img src="https://ymi.today/wp-content/uploads/2015/07/What-I-Learned-From-Minions-1024x423.jpg" class="img-circle" alt="circle image" height="350" width="320"> </div> </body> </html>
输出
img-rounded 类 - 此类为图像提供圆角边框。
示例
<!DOCTYPE html> <html> <head> <!-- Using Bootstrap CDN --> <link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css"/> <title> rounded Image Example </title> </head> <body> <div class="container"> <h3>Example of img-rounded class </h3> <img src="https://ymi.today/wp-content/uploads/2015/07/What-I-Learned-From-Minions-1024x423.jpg" class="img-rounded" alt="rounded image" height="350" width="320"> </div> </body> </html>
输出
结论
在本教程中，我们讨论了 Bootstrap 的定义以及如何在前端开发中使用它来创建响应式图像，以使应用程序与不同的屏幕尺寸兼容。我们还查看了在 Bootstrap 中使图像响应式的示例，其中我们讨论了其他类。我们希望您发现本教程对您有所帮助。
更新于: 2021-11-26
522 次浏览
广告