Maison > interface Web > tutoriel CSS > le corps du texte

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

DDD
Libérer: 2024-10-30 21:45:02
original
152 Les gens l'ont consulté

How to Resize Images by a Percentage Using CSS Without 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>
Copier après la connexion

HTML :

<code class="html"><img src="https://via.placeholder.com/300x200" /></code>
Copier après la connexion

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>
Copier après la connexion

HTML :

<code class="html"><div class="image-container"></div></code>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!