BootStrap3--图片样式、形状

最新推荐文章于 2024-12-11 11:05:19 发布

吴声子夜歌

最新推荐文章于 2024-12-11 11:05:19 发布

阅读量381

点赞数 2

CC 4.0 BY-SA版权

分类专栏： BootStrap 文章标签： BootStrap3 图片

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/cold___play/article/details/103195687

BootStrap 专栏收录该内容

4 篇文章

订阅专栏

在Bootstrap 3中，.img-responsive类使图片适应不同屏幕尺寸，配合.center-block类实现居中显示。本文介绍如何利用这些类实现图片的响应式布局及形状调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

响应式图片

在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。

如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center。

在这里插入图片描述

图片形状

通过为 <img> 元素添加以下相应的类，可以让图片呈现不同的形状。

在这里插入图片描述

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。