Comment redimensionner automatiquement des images en conservant leurs proportions ?

Mise en place du CSS

Le CSS offre un moyen de redimensionner les images tout en conservant leur ratio d'aspect. Les propriétés principales pour cela sont max-width et max-height. Ces propriétés limitent la taille de l'image sans l'étirer ni la déformer.

La propriété max-width définit la largeur maximale qu'une image peut avoir. Lorsqu'elle est réglée à 100%, elle empêche l'image d'être plus large que son conteneur. La propriété max-height fixe la hauteur maximale, ce qui aide à maintenir des mises en page cohérentes.

Ces propriétés fonctionnent ensemble pour conserver le ratio d'aspect. Lorsqu'une image atteint sa largeur ou sa hauteur maximale, elle cesse de croître dans les deux directions, gardant ainsi ses proportions d'origine.

Structure du code CSS

Voici un ensemble de règles CSS de base pour des images responsives :

img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}

Ce code fait ce qui suit :

1. max-width: 100% empêche l'image d'être plus large que son conteneur.
2. max-height: 100% limite la hauteur à celle du conteneur.
3. height: auto permet à la hauteur de changer en fonction de la largeur, préservant ainsi le ratio d'aspect.

Vous pouvez utiliser ces règles pour toutes les images de votre site ou pour des classes d'images spécifiques pour plus de contrôle. Cette méthode fonctionne pour différentes tailles de conteneurs et orientations d'images, ce qui la rend utile pour la conception web responsive. Voici la traduction en français :

Solutions JavaScript

JavaScript offre des options dynamiques de redimensionnement d'images. Ces méthodes peuvent redimensionner les images selon des conditions ou des interactions utilisateur. Vous pouvez utiliser JavaScript pour :

• Redimensionner les images lorsque la fenêtre est redimensionnée
• Appliquer une logique de redimensionnement basée sur les dimensions de l'image
• Créer des fonctionnalités de zoom d'image

Voici un exemple JavaScript simple :

window.addEventListener('resize', function() {
  var img = document.querySelector('img');
  var container = img.parentElement;
  img.style.width = Math.min(img.naturalWidth, container.clientWidth) + 'px';
});

Ce code redimensionne l'image lorsque la taille de la fenêtre change, la faisant tenir dans son conteneur.

Redimensionnement côté serveur

Le redimensionnement côté serveur traite les images avant de les envoyer au client. Cette approche :

• Réduit la taille des fichiers et les temps de chargement
• Permet d'avoir plusieurs versions pré-dimensionnées des images
• Décharge le traitement de l'appareil client

Le redimensionnement côté serveur peut être effectué à l'aide d'outils et de bibliothèques, tels que :

• ImageMagick pour PHP
• Sharp pour Node.js
• Pillow pour Python

Par exemple, en utilisant Sharp dans Node.js :

const sharp = require('sharp');

sharp('input.jpg')
  .resize(300, 200)
  .toFile('output.jpg')
  .then(info => { console.log(info); })
  .catch(err => { console.error(err); });

Ce code redimensionne une image d'entrée à 300x200 pixels et l'enregistre comme un nouveau fichier.

<?php
$image = new Imagick('input.jpg');
$image->resizeImage(300, 200, Imagick::FILTER_LANCZOS, 1);
$image->writeImage('output.jpg');
?>

Vous pouvez utiliser à la fois des solutions JavaScript et côté serveur avec des méthodes CSS pour un meilleur contrôle du redimensionnement des images.