Bootstrap 图片

• 

  图片形状

  圆角图片：

  

  椭圆图片：

  

  缩略图：

  

  圆角图片

  .rounded 类为图片添加圆角：

  <img src="/images/fj1.jpg" class="rounded" alt="Cinque Terre">
  

  尝试一下

  椭圆图片

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

  <img src="/images/xbs.jpg" class="rounded-circle" alt="Cinque Terre">
  

  尝试一下

  缩略图

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

  <img src="/images/fj2.jpg" class="img-thumbnail" alt="Cinque Terre">
  

  尝试一下
• 

  对齐图片

  使用 .float-right 类将图片浮动到右侧，或使用 .float-left 将图片浮动到左侧：

  <img src="/images/paris.jpg" class="float-left">
  <img src="/images/paris.jpg" class="float-right">
  

  尝试一下

  输出结果如下：

  

  通过添加类 .mx-auto (margin：auto) 和 .d-block (display：block) 添加到图片来居中图片：

  <img src="/images/paris.jpg" class="mx-auto d-block">
  

  尝试一下

  输出结果如下：

  
• 

  响应式图片

  图片有各种尺寸；屏幕也是如此；自适应图像会自动调整以适合屏幕尺寸。

  通过将 .img-fluid 类添加到 <img> 标签来创建响应图像；然后，图像将很好地缩放到父元素。

  .img-fluid 类适用最大宽度：100％； 和高度：自动； 图片：

  <img src="/images/paris.jpg" class="img-fluid" alt="Chania">
  

  尝试一下
• 

  相关页面

  CSS 图库

  CSS 对象适合(object-fit)