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)