Redimensionner une image à un pourcentage d'elle-même exclusivement avec CSS

Dans le domaine de la conception Web, la nécessité de redimensionner les images à des dimensions spécifiques se pose fréquemment. Un scénario consiste à réduire la taille d'une image à un pourcentage de sa taille d'origine, sans modifier la taille de son élément conteneur. Bien que JavaScript ou les scripts côté serveur offrent des solutions, cet article explore les alternatives potentielles uniquement CSS.

Est-il possible de redimensionner une image à l'aide de pourcentages CSS ?

À l'heure actuelle , il n'existe pas de propriété CSS directe permettant de redimensionner une image en fonction de sa propre taille. Cependant, il existe deux méthodes ingénieuses qui peuvent obtenir cet effet :

Méthode 1 : Redimensionnement visuel avec transformation

Cette méthode réduit visuellement la taille d'une image sans affecter sa dimensions réelles. La technique utilise la propriété 'transform: scale()' pour réduire l'image d'un pourcentage spécifié. L'image reste centrée dans ses dimensions d'origine.

Exemple :

img {
  transform: scale(0.5);
}