1、响应式图片

通过 Bootstrap 所提供的 .img-fluid 类让图片支持响应式布局。其原理是将 max-width: 100%; 和 height: auto; 赋予图片，以便随父元素一起缩放。

<img src="..." class="img-fluid" alt="...">

SVG 图片和 IE 浏览器
在 Internet Explorer 10 和 11 中，添加 .img-fluid 类的 SVG 图片的尺寸比例是错误的。要解决此问题，请在必要时添加 width: 100%; 或 .w-100。此修复方法无法正确调整其它图片格式的尺寸，因此 Bootstrap 不会自动开启此方法。

2、图片的缩略图

除了我们提供的 border-radius utilities 外，你还可以使用 .img-thumbnail 使图片的外观具有 1px 宽度的圆形边框。

<img src="..." class="img-thumbnail" alt="...">

3、对齐图片

通过使用 helper float classes 或 text alignment classes 将图片对齐。块级（block-level）图片可以使用 the .mx-auto margin utility class 居中对齐。

<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">

<img src="..." class="rounded mx-auto d-block" alt="...">

<div class="text-center"><img src="..." class="rounded" alt="...">
</div>

4、`<picture>`

如果你使用 <picture> 元素为某个 <img> 指定多个 <source> 元素的话，请确保将 .img-* 类添加到 <img> 元素而不是 <picture> 元素上。

<picture><source srcset="..." type="image/svg+xml"><img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！

Bootstrap系列之图片（Image）相关推荐

Bootstrap系列 -- 23. 图片
图像在网页制作中也是常要用到的元素,在Bootstrap框架中对于图像的样式风格提供以下几种风格: 1.img-responsive:响应式图片,主要针对于响应式设计 2.img-rounded:圆角 ...
ASP.NET MVC使用Bootstrap系列（3）——使用Bootstrap 组件
Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉菜单.导航.警告框.弹出框.输入框组等.在你的Web Application中使用这些组件,将为用户提供一致和简单易用的用户体验. ...
boostrap 鼠标滚轮滑动图片_16种基于Bootstrap的css3图片hover效果
bootstrap-image-hover是一款基于Bootstrap的css3图片hover效果.这组图片hover效果共16种特效.同时该特效也支持非Bootstrap版本. 使用方法在页面中引 ...
为什么手机上传图片这么慢前端_解决BootStrap Fileinput手机图片上传显示旋转问题_心病_前端开发者...
最近因为项目需要用到了bootstrap fileinput的插件,在使用苹果手机上传图片预览时,发现图片方向和手机本地存储方向不一致问题.后来通过查询资料了解图片具有EXIF(Exchangeabl ...
bootstrap图片叠加_详解Bootstrap四种图片样式
在本章中,我们将学习 Bootstrap 对图片的支持.Bootstrap 提供了四个可对图片应用简单样式的class,分别是: img-rounded 添加 border-radius:6px 来获 ...
信创办公--基于WPS的Word最佳实践系列（图片的基本处理）
信创办公–基于WPS的Word最佳实践系列(图片的基本处理) 项目背景在日常的商务办公中,我们难免要在自己的文档中插入图片进行点缀或增加说明,但是由于图片的来源错综复杂,我们时常需要对于图片进行处理 ...
Bootstrap框架----单张图片上传实现---Uploadify插件
框架搭建我们在之前的文章中已经实现了单张图片的上传,使用的是最基本的 File类型的input提交的方式,上传到远程静态资源器和七牛云. 之前的文章关注的地方主要是后端,也就是图片上传保存到哪里 ...
信创办公--基于WPS的Word最佳实践系列（图片批量居中对齐）
信创办公–基于WPS的Word最佳实践系列(图片批量居中对齐) 项目背景当我们进行Word排版的时候,一次性插入过多图片后,每张进行居中设置需要的重复动作较多,花费的时间也较长,因此我们可以用到WP ...
哄女友开心系列，图片拼图
picture 哄女友开心系列,图片拼图效果图实现原理比较简单,使用的都是 html 和 css 样式根据图片的多少,设置随机数的大小,图片按照1,2,3顺序排下去就可以了,如果图片够,可以不用 ...

Bootstrap系列之图片（Image）

文章の目录

1、响应式图片

2、图片的缩略图

3、对齐图片

4、`<picture>`

写在最后

Bootstrap系列之图片（Image）相关推荐

最新文章

热门文章

Bootstrap系列之图片（Image）

文章の目录

1、响应式图片

2、图片的缩略图

3、对齐图片

4、<picture>

写在最后

Bootstrap系列之图片（Image）相关推荐

最新文章

热门文章

4、`<picture>`