添加响应式设计的图片,这很简单,只需要给图片加上一些类就可以了。
Bootstrap 中,给图片添加 .img-fluid
类,这样它就变成了一张响应式设计的图片。另外添加 max-width: 100%;
和 height: auto;
可以让图片根据父元素的大小进行等比例缩放。
<img src="..." class="img-fluid" alt="Responsive image">
在Internet Explorer 10中,具有 .img-fluid
的SVG图像的大小不成比例。 要解决此问题,请添加 width: 100% \9;
。 由于此调整不能正确地调整其他图像格式的大小,因此Bootstrap不会自动应用它。
除了使用 border-radius 工具, 你还可以使用 .img-thumbnail
类来设置一个1像素宽度的边框。
<img src="..." alt="..." class="img-thumbnail">
给图像设置浮动类进行对齐。 块级图像可以使用 .mx-auto
margin 工具居中。
<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>
元素为特定的 <img>
指定多个<source>
元素,请确保将 <img>
类添加到 <img>
而不是 <picture>
标记。
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>