Ich arbeite an einer Thumbnail-Seite für eine Bildergalerie. Vorschaubilder werden als @ erstel<ul> mit schwebendem<li> mit einer festen quadratischen Größe.

Die Thumbnails Bildersic sind jedoch nicht unbedingt quadratisch oder gleich groß, sondern haben die Eigenschaften der großen Bilder, die sie darstellen.

Damit es gut aussieht, möchte ich die Mitte des Vorschaubilds auf dem Quadrat anzeigen.<li>, gleich viel Überlauf links und rechts abschneiden (sieheFeige. 1):

 +..+---------+..+                +---------+....+
 ://|  /\_/\  |//:                |     /\_/|////:
 ://| ( o.o ) |//:                |    ( o.o|////:
 ://|  > ^ <  |//:                |     > ^ |////:
 ://| {o___o} |//:                |    {o___|////:
 +..+---------+..+                +---------+....+
          (fig. 1)                        (fig. 2)

Ich kann dies tun, indem ich das @ entfer<img> Tag und Definition (CSS-Sprite):

<li style="width: x; height: x; overflow: hidden;">
   <div style="background: url(...) no-repeat center center;"/>
</li>

Das funktioniert und sieht gut aus, aber nur, wenn Sie CSS aktiviert haben. Außerdem ist es nicht sehr semantisch, da das Bild nicht durch ein @ angezeigt wir<img> Etikett

Wenn ich ein @ benut<img> tag anstelle des inneren<div> oben sieht es eher so aus wie inFeige. 2.

Wie würde ich das @ beweg<img> via CSS immer zentriert sein, egal wie breit das Vorschaubild eigentlich ist? Ich gehe davon aus, dass eine Art relative Positionierung dies tun könnte, aber ein naivesposition: relative; left: -50%; funktioniert nicht

P.S .: Ja, ich weiß, dass ich alle Thumbnails quadratisch machen kann, vorausgesetzt, das ist nicht die Antwort, die ich suche.