Bootstrap4 图像形状

前言 🔗

• Bootstrap4 图像形状。

1、圆角图片

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

• 实例

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

• 效果 🔗

  

2、椭圆图片

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

• 实例

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

• 效果 🔗

  

3、缩略图

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

• 实例

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

• 效果 🔗

  

4、图片对齐方式

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

• 实例

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

• 效果 🔗

  

5、响应式图片

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

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

• 实例

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

• 效果 🔗