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" />
本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!