Bootstrap4 图像形状

🌙
手机阅读
本文目录结构
a'xi'he

圆角图片

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

<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">

椭圆图片

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

<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">

缩略图

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

<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">

图片对齐方式

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

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

响应式图片

图像有各种各样的尺寸,我们需要根据屏幕的大小自动适应。

我们可以通过在 标签中添加 .img-fluid 类来设置响应式图片。

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

<img class="img-fluid" src="img_chania.jpg" alt="Chania">

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang