Aller au contenu principal

Guillaume Duverger Développeur & graphiste - Blog

CSS object-view-box

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;	
		
	}	


}






Vous rencontrez un problème avec cette démonstration ?

Vous avez constaté un oubli ou une erreur dans le code ? N'hésitez pas à me le signaler par mail (contact@guyom-design.com). Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.