Ich arbeite an einer Miniaturansicht für eine Bildergalerie. Vorschaubilder werden als <ul> mit Floating <li> mit einer festen, quadratischen Größe erstellt.
Die Thumbnails-Bilder selbst sind jedoch nicht unbedingt quadratisch oder gleich groß, sie haben die Eigenschaften der großen Bilder, die sie repräsentieren.
Um es schön aussehen zu lassen, möchte ich die Mitte des Miniaturbildes im Quadrat <li> anzeigen, wobei ein Überlauf gleichmäßig links und rechts abgeschnitten wird (siehe Abb. 1 ) :
Ich kann dies tun, indem ich das <img> -Tag lösche und (CSS-Sprite) definiere:
Das funktioniert und sieht gut aus, aber nur wenn Sie CSS aktiviert haben. Außerdem ist es nicht sehr semantisch, da das Bild nicht von einem <img> -Tag angezeigt wird.
Wenn ich ein <img> -Tag anstelle des inneren <div> oben verwende, sehen die Dinge eher wie in fig. 2 .
Wie würde ich die <img> via CSS verschieben, um immer zentriert zu sein, egal wie groß das Thumbnail-Bild wirklich ist? Ich nehme an, dass eine Art relativer Positionierung es tun könnte, aber ein naives position: relative; left: -50%; funktioniert nicht.
PS .: Ja, ich weiß, dass ich alle Thumbnails quadratisch machen kann, gehe davon aus, dass dies nicht die Antwort ist, nach der ich suche.
Die CSS clip -Eigenschaft kommt mir in den Sinn, aber ich glaube nicht, dass es möglich ist, eine Zentriertheit zu erreichen Quadrat damit, ohne die Abmessungen des Bildes zu kennen. Der sauberste Weg wäre wahrscheinlich, die Dimensionen des Thumbnails serverseitig herauszufinden und dann einen clip mit absoluten Pixelwerten darauf anzuwenden, so dass er quadratisch wird.
Wenn man davon ausgeht, dass die Bildgrößen keine Option sind (ich nehme an, Sie würden nicht fragen, ob es das wäre), kommt mir eine Umgehungslösung in den Sinn. Ich kann momentan keinen Testfall erstellen, aber etwas in dieser Richtung könnte funktionieren:
Platzieren Sie innerhalb des Quadrates li ein div mit einer festen Breite, die Ihr Bild niemals erreichen wird (zB 1000 Pixel) und geben Sie eine position: relative; left: -{x}px , x ist ("the feste Breite des div-Elements "/ 2) -" Breite des quadratischen li-Elements "
Geben Sie div text-align: center an (Sie benötigen möglicherweise auch align="center" , um IE6 zu berücksichtigen)
Platziere die img in div
Es sollte zentriert sein.
nicht hübsch, aber auch nicht allzu schrecklich.
Tags und Links css