Bootstrap4 图像形状

前言 🔗

  • Bootstrap4 图像形状。

1、圆角图片

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

  • 实例

    1
    2
    3
    4
    <div class="container">
    <p>.rounded 类可以让图片显示圆角效果:</p>
    <img src="https://demo.qianchia.com/media/image/demo21.png" class="rounded" alt="Cinque Terre" width="304" height="236" />
    </div>
  • 效果 🔗

2、椭圆图片

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

  • 实例

    1
    2
    3
    4
    <div class="container">
    <p>.rounded-circle 类可以设置椭圆形图片:</p>
    <img src="https://demo.qianchia.com/media/image/demo21.png" class="rounded-circle" alt="Cinque Terre" width="304" height="236" />
    </div>
  • 效果 🔗

3、缩略图

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

  • 实例

    1
    2
    3
    4
    <div class="container">
    <p>.img-thumbnail 类用于设置图片缩略图 (图片有边框):</p>
    <img src="https://demo.qianchia.com/media/image/demo21.png" class="img-thumbnail" alt="Cinque Terre" width="304" height="236" />
    </div>
  • 效果 🔗

4、图片对齐方式

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

  • 实例

    1
    2
    3
    4
    5
    <div class="container">
    <p>使用 .float-right 类来设置图片右对齐,使用 .float-left 类设置图片左对齐:</p>
    <img src="https://demo.qianchia.com/media/image/demo21.png" class="float-left" alt="Cinque Terre" width="304" height="236" />
    <img src="https://demo.qianchia.com/media/image/demo23.png" class="float-right" alt="Cinque Terre" width="304" height="236" />
    </div>
  • 效果 🔗

5、响应式图片

  • 图像有各种各样的尺寸,我们需要根据屏幕的大小自动适应。可以通过在 <img> 标签中添加 .img-fluid 类来设置响应式图片。

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

  • 实例

    1
    2
    3
    4
    <div class="container">
    <p>.img-fluid 类可以设置响应式图片,重置浏览器大小查看效果:</p>
    <img src="https://demo.qianchia.com/media/image/demo21.png" class="img-fluid" alt="Cinque Terre" />
    </div>
  • 效果 🔗

文章目录
  1. 1. 前言 🔗
  2. 2. 1、圆角图片
  3. 3. 2、椭圆图片
  4. 4. 3、缩略图
  5. 5. 4、图片对齐方式
  6. 6. 5、响应式图片
隐藏目录