【Bootstrap学习 day6】

2024-01-02 12:25:06

Bootstrap5图像

圆角图片
通过.rounded类实现

<img src="avatar.png" alt="头像" style="width:200px" class="rounded">

在这里插入图片描述
圆形
通过.rounded-circle类实现

<img src="avatar.png" alt="头像" style="width:200px" class="rounded-circle">

在这里插入图片描述

缩略图
通过.img-thumbnail类实现(图片有边框)

<img src="avatar.png" alt="头像" style="width:200px" class="img-thumbnail">

在这里插入图片描述

对齐图像
通过.float-start将图像向左浮动,或使用.float-end向右浮动

<img src="avatar.png" alt="头像" style="width:200px" class="img-thumbnail float-start">
<img src="avatar.png" alt="头像" style="width:200px" class="rounded-circle float-end">

在这里插入图片描述

图片居中
通过同时使用.mx-auto(margin:auto)和.d-block(display:block)类来设置图片居中对齐。

<img src="avatar.png" alt="头像" style="width:200px" class="mx-auto d-block">

在这里插入图片描述

响应式图片
使图片根据屏幕大小自动适应,通过.img-fluid类进行设置,此类主要将max-width:100%;和height:auto;应用于图像,以便它更好地缩放以适合包含元素。

<img src="avatar.png" alt="头像" style="width:200px" class="img-fluid">

初始效果:
在这里插入图片描述

未添加响应式的图片效果:
未添加响应式
添加响应式的图片效果:
在这里插入图片描述

文章来源:https://blog.csdn.net/weixin_44032244/article/details/135335227
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。