Le format d'image en CSS-Blog développement et graphisme-Guillaume Duverger

Introduction

Dans la conception web, la notion de format d'image réprésente la manière dont un élément doit être redimensionné proportionnellement à sa largeur ainsi que sa hauteur.

Le format d'image est le plus souvent exprimé par deux nombres entiers (exemple : 4:3), la largeur en premier puis la hauteur. Les rapports d'aspect les plus courants pour la photographie sont 4:3 et 3:2, tandis que la vidéo et les appareils photo les plus récents ont un rapport d'aspect de 16:9.

Le hack css avec la propriété `padding`

Il s'agit d'une vieille méthode pour conserver un rapport d'aspect qui, avec l'arrivée de la propriété aspect-ratio, dont le support est désormais étendu, ne s'avère plus utile. Il faut avouer que cette solution n'est ni naturelle ni intuitive.

Lorsqu'un élément possède un pourcentage de rembourrage vertical, il est alors basé sur la largeur de son élément parent.

Pour exemple :

Le format d'image 16:9 équivaut à 9 / 16 * 100% = 56.25%
Le format d'image 4:3 équivaut à 3 / 4 * 100% = 75%
Le format d'image 3:2 équivaut à 2 / 3 * 100% = 66.66%
Le format d'image 1:1 équivaut à 1 / 1 * 100% = 100%

Testez par vous-même :

16/9 4/3 3/2 1/1

La propriété `aspect-ratio`

Contrairement au padding hack, avec cette propriété, nous n'avons plus besoin d'un élément parent en se basant sur sa largeur pour englober le contenu dont nous tenons à garder les proportions. C'est beaucoup plus simple et cela allège le code.

Testez par vous-même :

16/9 4/3 3/2 1/1

En effet, il suffit de déclarer une largeur ou une hauteur à un élément et de définir un rapport d'aspect. C'est tout !

16:9



width: 20vw;
aspect-ratio: 16 / 9; /* 20vw / 16 * 9 = Hauteur 11.25vw */

Si vous déclarez une largeur ainsi qu'une hauteur à un élément, la propriété aspect-ratio n'aura aucun effet.

Dans le cas où vous avez un élément à l'intérieur d'un parent auquel vous avez défini une hauteur, il suffit de déclarer la propriété aspect-ratio sur l'élément enfant.



.parent-aspect {

  height: 200px;
  
}

.parent-aspect div {

background: #6753ea;
aspect-ratio: 1 / 1;

}

Le cas du débordement

Dans l'exemple ci-dessous, nous avons défini un format d'image fixe. Le problème est simple. Si nous ajoutons trop de contenu à l'intérieur de notre élément, ledit contenu va immanquablement dépasser de son conteneur lorsque nous allons passer sur un écran plus petit.

Nous pourrions alors ajouter simplement la propriété overflow pour ainsi faire apparaître une barre de défilement et, de fait, englober tout le contenu, comme ceci :

Mais, vous l'aurez compris, l'objectif est que le conteneur suive le flux du contenu. Une solution existe là-aussi avec la propriété padding. Il s'agit d'utiliser celle-ci avec les pseudo-éléments ::before et ::after :



.debordement{

  padding: 1rem;
  background-color: hsla(248, 78%, 62%, 0.6);
}

.debordement::before {

  content: "";
  padding-top: 56.25%;
  float: left;
  
}

.debordement::after {

  clear: left;
  content: " ";
  display: table;
  
	}
	
.debordement p{

font-size: 3rem;

}

Grâce à la propriété aspect-ratio, vous allez voir que la mise en place est beaucoup plus rapide et cohérente qu'avec le padding hack. En retirant la hauteur fixe, la taille de l'élément va s'adapter.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.



.element{

width: min(200px, 100%);
aspect-ratio: 2 / 1;

}

Changer les proportions d'une image

Voici une image au format 3:2. Nous allons opter pour du 16:9.

Encore une fois, avec la propriété aspect-ratio, c'est beaucoup plus simple :



img{

width:  100%;
height:100%;
aspect-ratio: 16/9;
object-fit: cover

}

Nous remarquons que l'image est allongée avec le format 16:9. Pour éviter que l'image ne soit écrasée par le nouveau format, nous ajoutons la propriété object-fit associée à la valeur cover de manière à occuper tout l'espace. Je vous invite à vous renseigner sur les propriétés d'images.

Avec le padding hack, il faudrait bien entendu déclarer un conteneur et placer notre image en positionnement absolu :



.aspect-ratio--16-9 {

--aspect-ratio: 16/9;
position: relative;
/*padding-top: 56.25%;*/
padding-top: calc(100%/(var(--aspect-ratio)));
		
}

.aspect-ratio--16-9 > * {

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;

}

Autre exemple avec trois colonnes en utilisant la propriété aspect-ratio. Vous pouvez mettre des images de tailles différentes. Elle auront toutes les mêmes proportions (ici le format est 3:2).

exemple colonnes images CSS aspect ratio



<div class="cadre-colonnes-apect">

<div class="contenu-colonnes-apect">
<div class="colonnes-apect-img">
<img src='image.jpg' alt>
</div>
<div class="colonnes-contenu">
...
</div>
</div>

<div class="contenu-colonnes-apect">
<div class="colonnes-apect-img">
<img src='image.jpg' alt>
</div>
<div class="colonnes-contenu">
...
</div>
</div>

<div class="contenu-colonnes-apect">
<div class="colonnes-apect-img">
<img src='image.jpg' alt>
</div>
<div class="colonnes-contenu">
...
</div>
</div>

</div>



.cadre-colonnes-apect {

display: grid;
grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
gap: 1rem;

}


.contenu-colonnes-apect {

border: 1px solid #aaa;
border-radius: .75rem;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
overflow: hidden;

}

.colonnes-contenu{

padding:1rem;

}


.cadre-colonnes-apect img {

aspect-ratio: 3 / 2;
display: block;
width: 100%;
height: 100%;
object-fit: cover;

}

Un exemple où la méthode avec le padding hack s'est avérée très utile se portait sur les diaporamas, sliders et autres carrousels. Comme les images se superposent en positionnement absolu, cette solution permettait de rendre la galerie responsive.

voir en plein écran

Le cas de l'image d'arrière-plan

Définir une image comme arrière-plan n'est pas une bonne pratique pour afficher une image. En effet, celle-ci ne sera pas reconnue par les technologies d'assistance. L'image d'arrière-plan ne doit être définie qu'à des fins décoratives.

Comme il s'agit d'une image de fond, nous n'allons pas utiliser la propriété object-fit propre aux images, mais la propriété background-size afin de définir le type de remplissage.

Rien de mieux pour réaliser un header (entête) sur votre site/blog. En quelques déclarations, vous obtenez un résultat très satisfaisant et responsive.

exemple header responsive CSS aspect ratio



<div class="entete-aspect">

<h1>Bienvenue sur mon blog</h1>

</div>



.entete-aspect {

aspect-ratio: 16 / 9; 
display: flex;
align-items: center;
justify-content: center;
background: url(image.jpg) no-repeat center/cover, linear-gradient(violet, #6753ea);
background-blend-mode: overlay;

}

.entete-aspect h1{

font-size: 4vw;
color: white

}

Avec la méthode padding hack, on utiliserait ce code :



<div class="cadre-aspect-ratio-background">
<div class="aspect-ratio-background">
</div>
</div>




.cadre-aspect-ratio-background{

margin:auto;
max-width: 800px;

}	

.aspect-ratio-background {

padding-top: 56.25%; /*16:9*/
background: url('image-fond.jpg') no-repeat center/cover;

}

Les éléments remplacés

Un élément remplacé est un élément dont le contenu est en dehors de la portée du modèle de formatage CSS, comme une image, une vidéo ou encore un document intégré (iframe).

Un élément remplacé est différent des autres boîtes en CSS. En effet, celui-ci possède des dimensions et un comportement propres. On dit que les éléments remplacés ont un rapport d'aspect intrinsèque, car ils ont des dimensions.

Comme nous avons pu le voir, il est possible de définir une proportion sur un élément qui possède un rapport d'aspect intrinsèque. Dans ce cas, la déclaration du ratio remplacera le rapport d'aspect intrinsèque.

Un exemple c-dessous avec un élément iframe :

voir en plein écran



<iframe src="" width="560" height="315" style="--aspect-ratio: 560 / 315"></iframe>
<!--ici on choisit d'écrire la largeur divisée par la hauteur ce qui revient à écrire --aspect-ratio:16/9 -->



iframe {

 aspect-ratio: var(--aspect-ratio); 
  width: 100%;
  height: auto;
}

Le fallback, la solution de repli

Comme nous avons pu le voir, le padding hack ne devrait pas être utilisé. Mais force est de constater qu'il fonctionne très bien et que le support est très bon. Si vous souhaitez mettre en place une solution de repli, celle-ci devrait vous convenir :



.class {
  --aspect-ratio: 16/9;
  padding-top: calc((1 / (var(--aspect-ratio))) * 100%);
}

@supports (aspect-ratio: 1) {
  .class {
    aspect-ratio: var(--aspect-ratio);
    padding-top: initial;/*on annule le padding*/
  }
}

Le format d'image en CSS