bootstrap4设置图像形状显示的方法-创新互联

这篇文章主要介绍了bootstrap4设置图像形状显示的方法,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

创新互联公司主要从事网站制作、成都网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务长顺,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792

                                                           bootstrap4设置图像形状显示的方法

圆角图片

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

实例

Cinque Terre

bootstrap4设置图像形状显示的方法

椭圆图片

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

实例

Cinque Terre

bootstrap4设置图像形状显示的方法

缩略图

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

实例

Cinque Terre

bootstrap4设置图像形状显示的方法

图片对齐方式

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

实例

 

bootstrap4设置图像形状显示的方法

响应式图片

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

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

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

实例

Chania

bootstrap4设置图像形状显示的方法

感谢你能够认真阅读完这篇文章,希望小编分享bootstrap4设置图像形状显示的方法内容对大家有帮助,同时也希望大家多多支持创新互联成都网站设计公司,关注创新互联成都网站设计公司行业资讯频道,遇到问题就找创新互联成都网站设计公司,详细的解决方法等着你来学习!

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、网站设计器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


分享文章:bootstrap4设置图像形状显示的方法-创新互联
分享路径:http://myzitong.com/article/jhgoe.html