Ich habe eine Liste von Abbildungen mit Hintergrundbildern. So etwas wie das folgende:

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

Jedes dieser Bilder hat seinebackground-size einstellencover undbackground-attachment einstellenfixed.

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

Wenn jede der Figuren das gesamte Ansichtsfenster einnimmt, funktioniert dies einwandfrei. Wenn jedoch ein Offset vorhanden ist, wird das Hintergrundbild abgeschnitten.

Soweit ich das beurteilen kann, ist dies beabsichtigt (https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Values).

Ich möchte, dass die Bilder entweder vertikal oder horizontal ausgeschnitten werden, aber nicht beide, und dass sie durch die Größe der Figur selbst zentriert werden.

Ich weiß, dass es Javascript-Lösungen gibt, aber gibt es eine Möglichkeit, dies mit CSS zu tun?

Hier ist ein funktionierendes Beispiel:http://codepen.io/Godwin/pen/KepiJ