Bootstrap/docs/4.5/content/images

在GitHub上查看

图片

选择图像以响应行为的文档和示例（这样它们就永远不会比其父元素大）并为它们添加轻量级样式（全部通过类）。

响应式图像

Bootstrap中的图像通过以下方式做出响应 .img-fluid.max-width: 100%; and height: auto; 应用于图像,以便与父元素缩放。

<svg aria-label="Placeholder: Responsive image" class="bd-placeholder-img bd-placeholder-img-lg img-fluid" focusable="false" height="250" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 响应图像 </text></svg>

Copy

SVG图像和Internet Explorer

在Internet Explorer 10和11中,带有 .img-fluid 尺寸不成比例。 要解决此问题,请添加 width: 100%; or .w-100 在必要时。 此修复程序无法正确调整其他图像格式的大小,因此Bootstrap不会自动应用它。

图片缩略图

除了我们的 边界半径实用程序 , 您可以使用 .img-thumbnail 使图像具有1px的圆形边框外观。

<svg aria-label="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera: 200x200" class="bd-placeholder-img img-thumbnail" focusable="false" height="200" preserveaspectratio="xMidYMid slice" role="img" width="200" xmlns="http://www.w3.org/2000/svg"><title> 通用方形占位符图像,周围带有白色边框,使其类似于用旧即时相机拍摄的照片 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 200x200 </text></svg>

Copy

对齐图像

将图像与 辅助浮动类 or 文字对齐类 .block 级别的图像可以使用 the .mx-auto 保证金实用程序类 .

<svg aria-label="Placeholder: 200x200" class="bd-placeholder-img rounded float-left" focusable="false" height="200" preserveaspectratio="xMidYMid slice" role="img" width="200" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 200x200 </text></svg>
<svg aria-label="Placeholder: 200x200" class="bd-placeholder-img rounded float-right" focusable="false" height="200" preserveaspectratio="xMidYMid slice" role="img" width="200" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 200x200 </text></svg>

Copy

<svg aria-label="Placeholder: 200x200" class="bd-placeholder-img rounded mx-auto d-block" focusable="false" height="200" preserveaspectratio="xMidYMid slice" role="img" width="200" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 200x200 </text></svg>

Copy

<div class="text-center">
<svg aria-label="Placeholder: 200x200" class="bd-placeholder-img rounded" focusable="false" height="200" preserveaspectratio="xMidYMid slice" role="img" width="200" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 200x200 </text></svg>
</div>

Copy

图片

如果你正在使用 <picture> 指定多个的元素 <source> 特定元素 <img> ,请确保添加 .img-* 类的 <img> 而不是 <picture> tag.