Dernière mise à jour : juin 2022
Votre navigateur ne supporte pas cette démonstration. Chromium uniquement.
Pour activer CSS object-view-box sur Chrome, tapez dans la barre d'adresse: chrome://flags, puis passez la valeur à enabled sur Experimental Web Platform features.
Le code :
<div class=mini-photos>
<img class="img-1" src="image.jpg" alt>
<img class="img-2" src="image.jpg" alt>
<img class="img-3" src="image.jpg" alt>
</div>
@supports (object-view-box: inset(0)) {
.img-1 {
object-view-box: inset(30% 65% 0% 15%);
}
.img-2 {
object-view-box: inset(64% 21% 27% 22%);
}
.img-3 {
object-view-box: inset(10% 25% 0% 50%);
}
.mini-photos {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem ;
}
.mini-photos img{
display:block;
border-radius: 12px;
width: 300px;
aspect-ratio: 3 / 2;
object-fit: cover;
}
}