图像

收藏846

阅读5013

更新时间2025-08-11

图像形状

圆角

.rounded 类为图像添加圆角:

实例

<img src="flower.jpg" class="rounded" alt="Flower">

圆形

.rounded-circle 类将图像塑造为圆形:

实例

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

缩略图

.img-thumbnail 类将图像塑造为缩略图(带边框):

实例

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

对齐图像

使用 .float-start 类将图像向左浮动,或使用 .float-end 向右浮动:

实例

<img src="tulip.jpg" class="float-start">
<img src="tulip.jpg" class="float-end">

居中图像

为了使图像居中,我们通过向图像添加了 utility 类 .mx-auto (margin:auto) 和 .d-block (display:block):

实例

<img src="tulip.jpg" class="mx-auto d-block">

响应式图像

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

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

.img-fluid 类为图像应用 max-width: 100%;height: auto;

实例

<img class="img-fluid" src="tiyugongyuan.jpg" alt="New York">

相关

视频

RELATED VIDEOS

更多

免费

Web前端开发极速入门
初级 Web前端开发极速入门

220622次学习

收藏

免费

前端入门_HTML5
初级 前端入门_HTML5

619062次学习

收藏

免费

30分钟学会网站布局
初级 30分钟学会网站布局

239149次学习

收藏

免费

CSS视频教程-玉女心经版
初级 CSS视频教程-玉女心经版

394761次学习

收藏

免费

独孤九贱(1)_HTML5视频教程

免费

独孤九贱(6)_jQuery视频教程

免费

独孤九贱(7)_Bootstrap视频教程

免费

独孤九贱(2)_CSS视频教程
初级 独孤九贱(2)_CSS视频教程

230705次学习

收藏

科技资讯

更多

精选课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时

62万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

39.5万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

71.3万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

61.9万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

23.1万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

34.1万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

125.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号