CSS-Clip und absolute Positionierung

Question

Ich benutze Clip, um Thumbnails für eine Galerie zu erstellen. Leider kann der Clip nur verwendet werden, wenn ein Element absolut positioniert ist. Auf jeden img gleichermaßen angewendet, bringt dies natürlich alle dazu, dass sie aufeinander sitzen, während sie einen CSS-Stil verwenden, etwas Ähnliches.

.Thumbnails { 
    position: absolute; 
    height: 105px; 
    clip: rect(50px 218px 155px 82px); 
} 

Wie kann ich sie dann relativ zueinander positionieren? Ich möchte nur einfache Zeilen.

Answer 1

Ich würde keine reine CSS-Lösung empfehlen. Haben Sie eine Bibliothek wie phpThumb in Betracht gezogen? Von dort nutzen Sie nur die folgende CSS:

.Thumbnails{float:left} 

und Verweise auf die Vorschaubilder am Ende dieses aussehen wie:

<img src="path/to/phpThumb.php?src=image.jpg&h=100&w=100&zc=1" alt="some image" /> 

Diese Linie würde im Grunde erstellen 100x100 Thumbnail gibt der zc eine Zoom-Ernte (Ernte Seitenverhältnis zu entsprechen, und die Thumbnail-Bibliothek hat einige ziemlich raffinierte Caching-Server Belastung zu reduzieren

Answer 2

Ich habe ein gutes Stück CSS gemacht, und ich kann mich nicht erinnern, jemals Clip verwendet oder gesehen zu haben. Misunderstood CSS Clip schlägt vor, ich bin nicht der einzige: "Die CSS-Clip-Eigenschaft muss eine der am wenigsten verwendeten Eigenschaften in CSS sein. Das liegt wahrscheinlich daran, dass niemand wirklich weiß, wann es zu verwenden ist, es scheint nicht im Internet unterstützt zu werden Explorer, und manche Leute benutzen es falsch. "

Also tun Sie es nicht mit Clip. Damit können Sie die Position loswerden: absolut, was Sie nicht erkannt haben, was Sie wollen. Wenn ich verstehe, was Sie versuchen zu tun, nur eingestellt Breite: und Höhe: Werte für die Bilder, sowie einige Polsterung, vielleicht etwa so:

.Thumbnails { 
    width: 100px; 
    height: 100px; 
    padding-bottom: 10px; 
    padding-right: 10px; 
} 

(Eric Meyers „Cascading Style Sheets: The Definitive Guide“ "Die lange und komplizierte Historie des Clips bedeutet, dass er in aktuellen Browsern inkonsistent funktioniert und in keiner browserübergreifenden Umgebung zuverlässig ist."

Answer 3

Hier ein paar Optionen sind:.

1. Sie können die Clip-Eigenschaft verwenden, um die Überlappung und Thumbnails zur gleichen Zeit zu verhindern: können http://www.cssplay.co.uk/menu/clip_gallery.html

2. Sie negative Margen verwenden, um die Bilder voneinander zu trennen und Überlauf die Thumbnails zu erstellen: http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image