CSS Clip und Absolute Positionierung
Ich bin mit clip-thumbnails zu erstellen für eine Galerie. Leider, clip kann nur verwendet werden, wenn ein element ist absolut positioniert. Angewendet gleichmäßig auf die einzelnen img, dies macht natürlich, Sie sitzen alle auf einander, während die Verwendung der CSS-Stil, so etwas wie dieses.
.Thumbnails {
position: absolute;
height: 105px;
clip: rect(50px 218px 155px 82px);
}
Wie kann ich dann die position Sie zueinander? Ich möchte nur basic-Zeilen.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich würde nicht empfehlen, eine Reine css-Lösung. Haben Sie sich überlegt eine Bibliothek wie phpThumb? Von dort verwenden Sie einfach die folgende css:
Und Verweise auf den thumbnails am Ende Aussehen wie diese:
Dass die Linie würde im Grunde erstellen Sie eine 100x100-thumbnail, der zc gibt eine zoom crop (zuschneiden zu entsprechen, Seitenverhältnis, und die Miniatur-Bibliothek bietet einige ziemlich raffinierte caching Serverlast zu reduzieren.
Hier sind ein paar Optionen:
Können Sie die clip-Eigenschaft, um zu verhindern, dass die sich überlappen, und erstellen Sie Miniaturansichten auf der gleichen Zeit:
http://www.cssplay.co.uk/menu/clip_gallery.html
Können Sie die Verwendung von negativen Rändern zu trennen, die Bilder von einander, und der überlauf zum erstellen der thumbnails:
http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image
Ich habe ein gutes Stück von CSS, und ich kann mich nicht erinnern, jemals genutzt haben oder sogar gesehen clip. Missverstanden CSS Clip vermuten ich bin nicht der einzige: "Die CSS clip-Eigenschaft hat eine der am wenigsten genutzten Eigenschaften in CSS. Dies ist wahrscheinlich, weil niemand wirklich weiß, Wann es zu benutzen, es scheint nicht in Internet Explorer unterstützt, und einige Leute es falsch verwenden."
Also tun Sie es nicht mit clip. Können Sie loszuwerden, position: absolute, die, wie Sie erkannte nicht, was Sie wollen. Wenn ich verstehe, was Sie versuchen zu tun, setzen Sie einfach die Breite: und Höhe: Werte für die Bilder, plus einige padding, vielleicht etwa so:
(Eric Meyer ' s "Cascading Style Sheets: The Definitive Guide", sagt "Die lange und wechselhafte Geschichte von clip bedeutet, dass in aktuellen Browsern, es wirkt nicht konsistent und kann nicht herangezogen werden, in cross-browser-Umgebung.")