Comment puis-je redimensionner et recadrer des images en utilisant uniquement CSS ?

Utiliser CSS pour redimensionner et recadrer une image

Dans cet article, nous explorerons comment redimensionner et recadrer une image à l'aide de CSS. Cette technique permet d'afficher une image avec une largeur et une hauteur spécifiques, même si l'image d'origine a un rapport hauteur/largeur différent.

Redimensionner et recadrer une image

Pour redimensionner et recadrer une image, vous pouvez utiliser une combinaison des propriétés img et background-image. La propriété img vous permet de redimensionner l'image tout en conservant ses proportions. La propriété background-image vous permet de recadrer l'image à la taille souhaitée.

Exemple

Considérez l'exemple suivant :

Cette image a une taille de 800x600 pixels. Nous souhaitons l'afficher sous la forme d'une image de 200x100 pixels.

Étape 1 : Redimensionner l'image

<br><img</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">style="width: 200px; height: 150px;" 
src="https://i.sstatic.net/wPh0S.jpg"></p>
<p>

Cette étape redimensionne l'image à 200 x 150 pixels, en conservant ses proportions.

Étape 2 : Recadrer l'image

<br><div</p><pre class="brush:php;toolbar:false">style="background-image:
       url('https://i.sstatic.net/wPh0S.jpg'); 
width:200px; 
height:100px; 
background-position:center;">&amp;nbsp;</div></p>
<p>&lt ;/pre></p>
<p>Cette étape recadre l'image redimensionnée pour 200x100 pixels.</p>
<h3>Approche combinée</h3>
<p>Vous pouvez combiner ces deux techniques pour obtenir le résultat souhaité. Par exemple, le code suivant :</p>
<p><pre class="brush:php;toolbar:false"></p>
<pre class="brush:php;toolbar:false">.crop {
    width: 200px;
    height: 150px;
    overflow: hidden;
}

.crop img {
    width: 400px;
    height: 300px;
    margin: -75px 0 0 -100px;
}

<div>