J'utilise le clip pour créer des vignettes pour une galerie. Malheureusement, le clip ne peut être utilisé que lorsqu'un élément est absolument positionné. Appliqué de manière égale à chaque IMG, cela les rend toutes les uns des autres tout en utilisant un style CSS, quelque chose comme ça. Comment puis-je ensuite les positionner par rapport à l'autre? Je veux juste des lignes de base.
4 Réponses :
J'ai fait un peu de CSS, et je ne me souviens plus jamais d'avoir utilisé ou même vu le clip. Le clip de CSS mal compris suggère que je ne suis pas le seul: "La propriété Clip CSS doit Soyez l'une des propriétés les moins utilisées dans CSS. C'est probablement parce que personne ne sait vraiment quand l'utiliser, il ne semble pas être pris en charge dans Internet Explorer, et certaines personnes l'utilisent de manière incorrecte. "
Alors ne le fais pas Faites-le avec un clip. Cela vous permet de vous débarrasser de la position: Absolute, que comme vous le reconnaissez n'est pas ce que vous voulez. Si je comprends bien ce que vous essayez de faire, il suffit de définir la largeur: et de la hauteur: valeurs pour les images, plus du rembourrage, peut-être comme suit: P>
.Thumbnails {
width: 100px;
height: 100px;
padding-bottom: 10px;
padding-right: 10px;
}
"Il ne semble pas être pris en charge dans Internet Explorer" Clip Works in IE, juste que le soutien est un peu bizarre
Je ne recommanderais pas une solution PURE CSS. Avez-vous envisagé une bibliothèque telle que phpthumb ? À partir de là, vous utilisez simplement les CSS suivants: et références aux vignettes finissent par apparaître comme ceci: cette ligne serait essentiellement Créez une vignette 100x100, le ZC spécifie une récolte de zoom (récolte pour correspondoir le rapport d'image, et la bibliothèque de vignettes fait une jolie mise en cache de la charge du serveur.
Voici quelques options:
Vous pouvez utiliser la propriété Clip pour empêcher le chevauchement et créer des vignettes en même temps: http://www.cssplay.co.uk/menu/clip_gallery.html
Vous pouvez utiliser des marges négatives pour séparer les images les unes des autres et déborder pour créer les vignettes: http://cssglobe.com/post / 6089/3-EASY-and-FAST-CSS-TECHNIQUES-FAUX-IMAGE
mise à jour à partir de 2021.
CSS3 a introduit la propriété CLIP-PATH , qui fournit la fonctionnalité souhaitée - Coupure n'importe quel élément.
https://www.w3schools.com/cssref/csss3_pr_clip-path.aspecele_/a >