Galerie masonry CSS sans rognage des photos portrait

This commit is contained in:
Jalil Arfaoui 2026-03-09 15:53:15 +01:00
parent 3639639062
commit 22b3067446

View file

@ -122,13 +122,13 @@ if (!spectacle) {
{spectacle.gallery.length > 0 && ( {spectacle.gallery.length > 0 && (
<section class="fade-up mb-16 md:mb-24"> <section class="fade-up mb-16 md:mb-24">
<h2 class="font-display text-3xl md:text-5xl text-night mb-8 md:mb-12 text-center">Galerie</h2> <h2 class="font-display text-3xl md:text-5xl text-night mb-8 md:mb-12 text-center">Galerie</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 md:gap-8"> <div class="columns-1 sm:columns-2 gap-6 md:gap-8">
{spectacle.gallery.map((img, index) => ( {spectacle.gallery.map((img, index) => (
<div class="aspect-[4/3] overflow-hidden rounded-[24px] md:rounded-[40px] shadow-xl shadow-night/5 border-4 border-white"> <div class="mb-6 md:mb-8 break-inside-avoid overflow-hidden rounded-2xl md:rounded-3xl shadow-xl shadow-night/5 border-4 border-white">
<img <img
src={img} src={img}
alt={`${spectacle.title} - photo ${index + 1}`} alt={`${spectacle.title} - photo ${index + 1}`}
class="object-cover w-full h-full" class="w-full h-auto"
referrerpolicy="no-referrer" referrerpolicy="no-referrer"
/> />
</div> </div>