Galerie masonry CSS sans rognage des photos portrait
This commit is contained in:
parent
3639639062
commit
22b3067446
1 changed files with 3 additions and 3 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue