Bootstrap4 图像形状

图像形状

Bootstrap4 学习笔记

发布日期: 2020-08-16

更新日期: 2021-07-19

文章字数: 339

阅读时长: 1 分

Bootstrap4 图像形状

圆角图片

.rounded 类可以让图片显示圆角效果：

<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">

椭圆图片

.rounded-circle 类可以设置椭圆形图片:

<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">

缩略图

.img-thumbnail 类用于设置图片缩略图(图片有边框):

<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">

图片对齐方式

使用 .float-right 类来设置图片右对齐，使用 .float-left 类设置图片左对齐:

<div class="container">
    <h2>图片对齐方式</h2>
    <p>使用 .float-right 类来设置图片右对齐，使用 .float-left 类设置图片左对齐:</p>
    <img src="https://static.runoob.com/images/mix/paris.jpg" class="float-left" alt="paris">
    <img src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="float-right" alt="cinqueterre">
</div>

响应式图片

图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应。

我们可以通过在 <img> 标签中添加 .img-fluid 类来设置响应式图片。

.img-fluid 类设置了 max-width: 100%; 、 height: auto; :

<div class="container">
    <h2>响应式图片</h2>
    <p>.img-fluid 类可以设置响应式图片，重置浏览器大小查看效果:</p>
    <img src="https://static.runoob.com/images/mix/paris.jpg" class="img-fluid">
</div>