如何用CSS从单张图片裁剪可缩放子图并构建轮播组件？

完全可以用纯CSS实现你的需求，核心是利用背景图定位+缩放或者img元素的object-fit/object-position配合宽高比设置，来实现单张大图内不同区域的裁剪与自适应缩放，无需提前用图片编辑器拆分图片。

解决方案思路 #

• 为每个地图区域定义独立的定位规则，通过CSS定位到大图中的对应位置
• 给容器（或img元素）设置固定的宽高比，确保缩放时裁剪区域保持正确比例，不会变形
• 切换轮播时，只需给容器切换对应的定位类即可

具体实现代码示例 #

方法1：使用背景容器（推荐，更灵活）

<!-- 轮播容器，切换类即可切换显示的地图 -->
<div class="map-carousel map-1"></div>

.map-carousel {
  /* 设置与单张地图匹配的宽高比，根据原始大图的地图比例调整，示例为4:3 */
  aspect-ratio: 4/3;
  width: 100%;
  max-width: 800px; /* 限制最大宽度，可按需调整 */
  background-image: url('https://www.floridamemory.com/FMP/maps/large/fmc0001.jpg');
  background-size: cover; /* 让背景图缩放填满容器，保证裁剪区域自适应 */
  background-repeat: no-repeat;
  overflow: hidden;
}

/* 四张地图的定位规则（原始大图为2x2布局） */
.map-1 {
  background-position: 0 0; /* 左上角地图 */
}
.map-2 {
  background-position: 50% 0; /* 右上角地图 */
}
.map-3 {
  background-position: 0 50%; /* 左下角地图 */
}
.map-4 {
  background-position: 50% 50%; /* 右下角地图 */
}

方法2：使用img元素

如果你更倾向于使用img标签，也可以通过object-fit和object-position实现：

<img class="map-img map-1" src="https://www.floridamemory.com/FMP/maps/large/fmc0001.jpg" alt="地图">

.map-img {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 4/3; /* 匹配单张地图比例 */
  object-fit: cover; /* 裁剪并缩放图片以填满容器 */
  object-position: 0 0; /* 默认定位到左上角 */
}

.map-2 {
  object-position: 50% 0;
}
.map-3 {
  object-position: 0 50%;
}
.map-4 {
  object-position: 50% 50%;
}

关键原理 #

• background-size: cover或object-fit: cover会自动缩放原始大图，确保裁剪区域填满容器，同时保持图片比例
• aspect-ratio属性固定容器比例，保证缩放时地图不会拉伸变形
• 切换background-position或object-position即可快速切换显示的地图区域，完美适配轮播组件的切换逻辑

内容的提问来源于stack exchange，提问作者dmaltron87