图片网站建设网页设计网站开发小程序独立站跨境电商二维码制作

bootstrap使用手册

图片

Bootstrap响应式图片是一种能够根据设备屏幕大小自适应展示图片的技术，在网站建设、网页设计、网站开发、小程序、独立站以及跨境电商等领域得到广泛应用，能够提高用户体验和网站的可访问性。

BootStrap图片处理的示例和文档，由于我们为图片添加了轻量级的无干扰样式和响应式行为，因此在BootStrap设计中引用图片可以更加方便且不会轻易撑破其它元素。

响应式图片

在Bootstrap中，给图片添加.img-fluid样式，或定义max-width: 100%、height:auto;样式，即可赋得响应式特性，图片大小会随着父元素大小同步缩放。

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

IE 10问题以及SVG图形的特殊处理

在IE 10浏览器中，带.img-responsive类的SVG图片尺寸可能会不均称，这是一个浏览器级的缺陷，你可以在相应图片元素上添加width: 100% \9来解决它（width:100% \9方法不能普遍引用，否则会造成其它图片格式的混乱，所以Bootstrap没有全局自动引用之）。

缩略图处理

您可以使用.img-thumbnail属性来使图片自动被加上一个带圆角且1px边界的外框缩略图样式（你也可以使用系统提供的边隙间距方法，如.p-1再加上边框颜色定义达成），效果如下：

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

图像对齐处理

对于.block属性的块状图片，我们也可以使用浮动定义规范或文字对齐规范，来实现对图像的对齐、浮动控制，带.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 srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>

<picture>
  <source src="大规格图片.jpg"  media="(min-width: 800px)" >
  <source src="中规格图片.jpg"  media="(min-width: 600px)">
  <source src="小规格图片.jpg">
  <img src="通用图片.jpg" alt="这是当浏览器不支持picture标签时显示的图片">
</picture>

加入 DEVDIY 开发者社区

利用 DEVDIY 资源快速拓展您的业务
有兴趣与 DEVDIY 开发者合作吗？