我有一个包含背景图像的数字列表。类似于以下内容：

<ul>
  <li>
    <figure style="background-image: url(...);"></figure>
  </li>
  <li>
    <figure style="background-image: url(...);"></figure>
  </li>
  <li>
    <figure style="background-image: url(...);"></figure>
  </li>
</ul>

这些图像中的每个图像都将其background-size设置为，cover并background-attachment设置为fixed。

figure {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-attachment: fixed;
}

当每个图形都占据整个视口时，这可以正常工作，但是如果存在任何偏移，则背景图像将被裁剪。

。

我希望图像可以垂直或水平剪切，但不能同时剪切，并且要以图形本身的大小为中心。

我知道有JavaScript解决方案，但是有没有办法使用CSS做到这一点？