Comment redimensionner des images selon un pourcentage en utilisant CSS sans JavaScript ?

Redimensionner les images à un pourcentage d'elles-mêmes en CSS

Question :

Comment pouvez-vous réduire les dimensions d'une image d'un pourcentage à l'aide de CSS, sans recourir à JavaScript ou à des solutions côté serveur, dans des scénarios où la taille d'origine de l'image est inconnue ?

Réponse :

Méthode 1 (Redimensionnement visuel) :

Cette approche met l'image à l'échelle visuellement uniquement, en conservant ses dimensions d'origine dans le DOM. Cependant, l'image redimensionnée est centrée dans le conteneur d'origine.

<code class="css">img {
  transform: scale(0.5);
}</code>

HTML :

<code class="html"><img src="https://via.placeholder.com/300x200" /></code>

Méthode 2 (taille d'arrière-plan basée sur un pourcentage) :

Vous pouvez également appliquer une taille d'arrière-plan basée sur un pourcentage à un élément DIV contenant l'image.

<code class="css">.image-container {
  width: 100%;
  height: 100%;
  background-image: url("image.png");
  background-size: 50% 50%;
  background-repeat: no-repeat;
}</code>

HTML :

<code class="html"><div class="image-container"></div></code>

Remarque :

Bien que la méthode 1 permette d'obtenir le résultat de redimensionnement souhaité pour une seule image, la méthode 2 peut être utilisée pour redimensionner plusieurs images de manière cohérente dans un conteneur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!