本文档及示例展示了如何让图片支持响应式行为(这样它们就不会超出父元素的范围)以及如何通过类(class)添加些许样式。
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^)\\\~~~
谢谢各位读者们啦(^_^)∠※
!!!