Importa il foglio CSS...
<link rel="stylesheet" href="https://matteofuso.github.io/Sites/wiki/card/card.css">
...o in alternativa le seguenti classi
.flex-height{
min-height: 100%;
}
.flex{
display: flex;
flex-wrap: wrap;
}
.card-img{
width: 100%;
aspect-ratio: 1920/1080;
/* Ciò che Forza le proporzioni a 1920 di larghezza e 1080 di altezza */
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
}
Crea il contenitore delle carte
<div class="w3-row flex">
...
</div>
Crea le tue carte
<div class="w3-third w3-padding">
<div class="w3-card-4 flex-height">
<div class="card-img bg-1"></div>
<div class="w3-container">
<p>Testo della card...</p>
</div>
</div>
</div>
Crea una classe css con un immagine di sfondo e applica la classe alla card, come al codice precedente
.bg-1{
background-image: url("https://www.w3schools.com/w3css/img_car.jpg");
/* Opzionale, per centrarle meglio */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/background-position?retiredLocale=it */
/* background-position: 0 20% */
}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo ipsam vitae enim possimus sint minus aliquam rem! Vitae accusantium nemo odit quae neque, facere labore eaque fugit quas! Quaerat, facilis!
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo ipsam vitae enim possimus sint minus aliquam rem! Vitae accusantium nemo odit quae neque, facere labore eaque fugit quas! Quaerat, facilis! Amen!