Bootstrap4 图像效果

Bootstrap 4 提供了很多图片的效果，比如圆角效果，椭圆效果，缩略图效果等

圆角图片

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

<img src="/static/i/img1.jpg" class="rounded" />

椭圆图片

.rounded-circle CSS 类可以设置椭圆形图片效果

<img src="/static/i/img1.jpg" class="rounded-circle" />

缩略图效果

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

<img src="/static/i/img1.jpg"  class="img-thumbnail" />

图片对齐方式

.float-right CSS 类来设置图片右对齐

.float-left CSS 类设置图片左对齐

<img src="/static/i/img2.jpg" class="float-left"> 
<img src="/static/i/img3.jpg" class="float-right">

响应式图片

现在的设备尺寸多种多样，我们需要根据屏幕的大小自动适应

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

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

<img class="img-fluid" src="/static/i/img3.jpg" />

链接: https://fly63.com/course/19_950