【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
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。