Html 如何使用css将图像分割为两个div块？

我有一个反应灵敏的图像：

<img class="img-responsive" src="img/image.jpg"/>

我想把它分成两个部分：

<div class="slice s1"></div>
<div class="slice s2"></div>

或：

如何动态地或使用css来实现这一点

---

我试图设置两个

div

的

背景图像和
背景位置，但新图像不一样，不再响应。
要使背景图像缩放为
div
大小，需要设置属性

.slice {
    background-size: cover;
}

您可以使用任何CSS大小单位（
50px
，
3em
，
50%
，等等）以及
auto
，
cover
和
contain
。您需要使用各种设置，看看是否可以使它们匹配<代码>封面
将确保背景图像填满整个容器，并裁剪溢出物<代码>包含

将确保背景图像始终适合容器内部，并将显示在信箱中

最后，如果需要div以特定的宽高比缩放，可以使用“百分比填充”技巧

<代码>。保持比率{ 背景：矢车菊蓝； 宽度：100%； } .保持比率：：之前{ 内容：''； 显示：块； 填充顶部：50%；/*0.5比率，宽度的一半*/ }

---

这是一个很酷的问题，也是可行的

只要两个图像大小相同，并且将外部图像的宽度设置为图像的宽度，并且只要不影响动画中的宽度，对内部图像所做的任何更改都将反映在图像的左侧，对外部图像所做的任何更改都将反映在图像的右侧

#图像{
位置：相对位置；
宽度：200px；
}
#半像{
位置：绝对位置；
排名：0；
左：0；
宽度：50%；
溢出：隐藏；
}

---

我从@wlh的答案中找到了一个解决方案：

.img响应{
宽度：100%；
最大宽度：100%；
高度：自动；
}
.隐藏{
可见性：隐藏；
}
.切片img{
位置：相对位置；
宽度：100%；
}
.切片{
位置：绝对位置；
排名：0；
宽度：50%；
身高：100%；
背景尺寸：封面；
}
.s1{
左：0；
背景图像：url（'https://placehold.it/200/0e0e0e）；/*黑色*/
背景位置：0%；
}
.s2{
左：50%；
背景图像：url（'https://placehold.it/200/e8117f）；/*粉红色*/
背景职位：-100%；
}

你是说你有一个图像要在两个div之间分割，这样它看起来仍然像一个图像？@dargue3是的，没错！你能举个例子说明你为什么需要这样做吗？为什么要将图像分割为多个部分？例如，要制作动画，每个部分的动画设置都不同。请使用CSS更新这些元素的原始问题。img-responsive是响应图像的引导类。slice、s1和s2是我正在寻找的。这很酷，谢谢，但尺寸是静态的（#图像宽度），我找到了一个完美的解决方案，灵感来源于你的，请参见上面我的答案。

.slice {
    background-size: cover;
}