相关疑难解决方法(0)

我有一个包含背景图像的图表列表.类似于以下内容:

<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;
}

当每个图形占据整个视口时,这可以正常工作,但如果存在任何类型的偏移,则背景图像被剪切.

据我所知,这是设计(https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Values).

我希望图像可以垂直或水平剪辑,但不能同时剪辑,而是以图形本身的大小为中心.

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

这是一个工作示例:http://codepen.io/Godwin/pen/KepiJ