Bootstrap不提供图片切片功能，需用CSS绝对定位+背景图+响应式坐标实现；避免滥用img+srcset或clip-path，关键在于容器宽高比锁定与切片坐标百分比控制。
Bootstrap 本身不提供“图片切片”（image slicing）功能——这不是它的设计目标，也没有内置的 slicing、image-map 或 grid-crop 类。所谓“响应式图片切片”，通常是指将一张大图按网格分割为多个区域，在不同断点下独立控制显示/隐藏/缩放/定位，或模拟传统切片导航效果。实现它必须脱离 Bootstrap 的栅格“自动流式布局”思维，转而用 CSS 定位 + 响应式裁剪 + 手动网格划分。
用 position: absolute + background-image 手动切片
这是最可控、兼容性最好、且真正“切片”的做法：把原图设为容器背景，用子元素绝对定位覆盖不同区域，每个子元素代表一个“片”。Bootstrap 的栅格只用来搭外层结构，不参与切片逻辑。
常见错误是直接对 <img> 使用 clip-path 或 object-position 做多区域裁剪——这只能裁一次，无法实现“多个可交互切片”。必须用容器 + 背景 + 多个定位层。
- 容器设
background-image，background-size: cover或100% 100%（取决于是否要拉伸） - 每个切片用
div，设position: absolute，通过top/left/width/height精确框出原图坐标区域（单位推荐%，保证响应式） - 用
@media单独调整各切片的top/left等值，而不是依赖 Bootstrap 的col-md-* - 切片内可加文字、链接或伪元素，但不要给切片本身设
background-image——否则会重复加载原图
.slice-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 */
background: url('hero.jpg') no-repeat center center;
background-size: cover;
}
.slice-item {
position: absolute;
background: transparent;
}
.slice-1 { top: 0; left: 0; width: 50%; height: 50%; }
.slice-2 { top: 0; right: 0; width: 50%; height: 50%; }
@media (max-width: 768px) {
.slice-1, .slice-2 { width: 100%; height: 50%; }
.slice-1 { top: 0; left: 0; }
.slice-2 { top: 50%; left: 0; }
}避免滥用 img + srcset 模拟切片
有人尝试用多个 <img> 标签，各自 srcset 不同裁剪图，再靠 Bootstrap 栅格排列——这看似“响应式”，实则问题密集：
- 每张切片图都要单独导出、命名、维护，图片数量 × 断点数 = 维护爆炸点
- 浏览器仍会下载所有
srcset中的图（尤其 Safari），浪费带宽 - 无法保证多图拼接边缘像素对齐（抗锯齿、缩放插值差异）
- Bootstrap 的
col在小屏堆叠时，高度塌陷导致切片错位，需额外min-height补救
除非切片内容语义完全不同（如：左图是产品 A，右图是产品 B），否则不建议走这条路。
用 clip-path 做单图多区域高亮（非真切片）
如果需求只是“点击某区域高亮/跳转”，而非真正分离 DOM 结构，可用 clip-path 配合 map 区域逻辑。Bootstrap 只负责容器尺寸，clip-path 写在子元素上。
注意：IE 完全不支持 clip-path；Firefox 对 inset() 支持好，但 polygon() 坐标需用 % 才响应式；Safari 需加 -webkit-clip-path 前缀。
- 用
inset(top right bottom left)最简单，适合矩形切片（如四宫格） - 复杂形状必须用
polygon(x y, x y, ...)，坐标建议用 SVG 工具导出后转%值 - 每个
clip-path区域需包裹独立div并监听click，不能直接作用于<img>（事件穿透问题）
<div class="img-wrapper"> <img src="full.jpg" alt=""> <div class="hotspot hotspot-1" style="clip-path: inset(0 50% 0 0);"></div> <div class="hotspot hotspot-2" style="clip-path: inset(0 0 0 50%);"></div> </div>
真正的响应式切片不是“让 Bootstrap 帮你切”，而是放弃对栅格的依赖，用 CSS 定位和背景图控制视觉分区，并把媒体查询逻辑落到每个切片的偏移量上。最容易被忽略的是：切片坐标必须用相对单位（%），且容器高度不能靠内容撑开——必须用 padding-bottom 或 aspect-ratio 锁定宽高比，否则小屏下定位全乱。
