©
本文档使用 PHP中文网手册 发布
文档和示例用于选择图像为响应行为%28,这样它们就不会比父元素%29大,并向它们添加轻量级样式--所有这些都是通过类实现的。
引导带中的图像是通过以下方式做出响应的.img-fluid
...max-width: 100%;
和height: auto;
应用于图像,使其与父元素进行缩放。
<img src="..." class="img-fluid" alt="Responsive image">
在InternetExplorer 10中,SVG图像与.img-fluid
不成比例的大小。若要修复此问题,请添加width: 100% \9;
必要的时候。这个修复错误地调整了其他图像格式的大小,所以Bootstrap不会自动应用它。
除了我们边界半径公用事业,你可以用.img-thumbnail
若要使图像呈现圆形1 px边框,请执行以下操作。
<img src="..." alt="..." class="img-thumbnail">
对齐图像与辅助浮点数类或文本对齐类...block
-级别图像可以使用大.mx-auto
边际效用类...
<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>
如果您使用的是<picture>
元素指定多个<source>
特定元素的元素。<img>
,确保添加.img-*
类的<img>
而不是去<picture>
标签。
<picture> <source srcset="..." type="image/svg+xml"> <img src="..." class="img-fluid img-thumbnail" alt="..."></picture>
© 2011–2017 Twitter, Inc.
©2011-2017自带作者
根据麻省理工学院的许可授权的代码。
根据CreativeCommonsAttributionLicense v3.0授权的文档。