Bootstrap实现圆角、圆形头像和响应式图片
作者:Tiramisu_C 时间:2023-08-12 07:16:59
Bootstrap提供了四种用于<img>类的样式,分别是:
.img-rounded:圆角 (IE8 不支持),添加 border-radius:6px 来获得图片圆角;
.img-circle:圆形 (IE8 不支持),添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail:缩略图功能,添加一些内边距(padding)和一个灰色的边框。
.img-responsive:图片响应式 (将很好地扩展到父元素)。
使用:
将类样式直接添加到class中即可:
<img class="img-circle" src="img.jpg" alt="头像"/>
效果如下:
从图中可以看到使用各种样式得到的效果,处理起图片来非常的简单方便。有时候根据需要,比如我们需要用一个具有内边距和灰色边框的圆形头像时,可以将circle和thumbnail两个样式叠加使用,效果如上图circle thumbnail所示。
img-responsive使得我们的图片具有响应式的效果。所谓响应式,就是变化的,随着某一个元素的变化而变化,从而实现自适应的效果。
上图中的responsive两个图片代码如下:
<figure style="width: 150px;height: 150px;">
<figcaption>responsive(150*150)</figcaption>
<img class="img-responsive " src="img.jpg" alt="头像"/>
</figure>
<figure style="width: 100px;height: 100px;">
<figcaption>responsive(100*100)</figcaption>
<img class="img-responsive " src="img.jpg" alt="头像"/>
</figure>
在这里我们没有设置图片的大小,但是设置了包裹他的元素figure 的大小,无论figure为150px*150px或者100px*100px,图片都能够很好的扩展到父元素figure。
本文参考来自:http://www.runoob.com/bootstrap/bootstrap-images.html
标签:Bootstrap,圆角头像,响应式图片
0
投稿
猜你喜欢
两大步骤教您开启MySQL 数据库远程登陆帐号
2010-09-30 16:42:00
通过数据库对Django进行删除字段和删除模型的操作
2024-01-19 09:28:44
Python实现PS图像调整黑白效果示例
2022-08-06 09:15:13
Python之基础函数案例详解
2023-07-09 19:43:24
将HTML自动转为JS代码
2010-03-17 20:49:00
MySQL数据库主从复制原理及作用分析
2024-01-26 11:42:14
将pip源更换到国内镜像的详细步骤
2021-01-13 07:33:00
详解django自定义中间件处理
2023-09-30 08:19:12
使用python进行nc转tif的3种情况解决
2022-05-09 11:22:43
MySQL执行计划的深入分析
2024-01-19 18:44:16
php环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2023-11-14 22:08:47
sqlserver索引的原理及索引建立的注意事项小结
2024-01-14 03:39:34
python使用建议与技巧分享(一)
2023-07-25 05:45:52
Python基于二分查找实现求整数平方根的方法
2023-01-17 01:33:49
10分钟搞定让你困惑的 Jenkins 环境变量过程详解
2023-09-23 13:56:03
openai createChatCompletion函数使用实例
2023-06-14 16:45:38
微信小程序实现日期时间筛选器
2023-08-29 00:51:37
Java开发之Spring连接数据库方法实例分析
2024-01-26 02:00:54
纯js实现动态时间显示
2024-05-05 09:13:44
Centos7.4环境安装lamp-php7.0教程
2023-11-16 03:07:24