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="头像"/> 

效果如下:

Bootstrap实现圆角、圆形头像和响应式图片

从图中可以看到使用各种样式得到的效果,处理起图片来非常的简单方便。有时候根据需要,比如我们需要用一个具有内边距和灰色边框的圆形头像时,可以将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
  • asp之家 网络编程 m.aspxhome.com