Comment redimensionner les images HTML proportionnellement ? Résumé des méthodes de mise à l'échelle des images HTML img (avec exemples)-tutoriel HTML-php.cn

Comment redimensionner les images HTML proportionnellement ? Résumé des méthodes de mise à l'échelle des images HTML img (avec exemples)

寻∝梦

Libérer： 2018-09-01 16:12:56

original

37319 Les gens l'ont consulté

Cet article présente principalement l'introduction et les exemples d'utilisation de la mise à l'échelle égale des images de balises html img. Enfin, il y a un résumé de la mise à l'échelle égale des images de balises html img. Ensuite, lisons cet article ensemble. >

Tout d'abord, voyons comment mettre à l'échelle les images html img dans des proportions égales :

Dans la mise en page CSS DIV pour la liste d'images ou la mise en page d'images, l'image n'a pas une largeur fixe et height size , mais l'occupation de l'image est une largeur et une hauteur fixes. À ce stade, si vous utilisez CSS pour fixer la taille de l'image (largeur et hauteur), si l'image n'est pas proportionnellement dimensionnée par rapport à cette position, alors l'image le sera. être déformé, ce qui rend l'image inconfortable. À ce stade, je souhaite que l'image soit mise à l'échelle proportionnellement sans déformation. Les images CSS peuvent être réduites sans déformation, les images peuvent être automatiquement réduites et les images peuvent être réduites proportionnellement sans déformation.

Il existe deux solutions pour la mise à l'échelle des images de balises html img :

Tout d'abord, rendez la largeur et la hauteur de l'image et de la mise en page proportionnelles, afin que CSS définisse la largeur morte. et la hauteur. L'image est également réduite et l'image ne sera pas déformée.

Par exemple, Taobao exige que les propriétaires de magasins téléchargent des photos de couverture de produit carrées. Pourquoi ? Parce que la liste d'affichage des photos de bébé a une disposition carrée. Cela nécessite de télécharger une photo de couverture de bébé carrée appropriée pour éviter que l'image ne se déforme. .

Par conséquent, si possible, tout le monde doit garder la largeur et la hauteur de la page d'accueil et de la page de liste d'images cohérentes. Lors du téléchargement d'images, les images doivent d'abord être traitées pour agrandir la taille proportionnellement à la largeur et à la hauteur de la mise en page.

2. Utilisez CSS max-width et max-height pour réduire automatiquement l'image proportionnellement.

C'est très simple. Nous devons utiliser max-width et max-height, afin de pouvoir définir. la taille maximale de l'image de l'objet. Largeur et hauteur maximale, de sorte que l'image soit mise à l'échelle proportionnellement, mais l'image soit relativement non déformée et claire.

Le DIVCSS5 suivant utilise l'exemple de méthode de comparaison pour permettre à chacun de maîtriser les techniques de réduction et de non-déformation des images de contrôle CSS.

Regardons le cas de la mise à l'échelle des images html img :

Il y a une boîte DIV ici (la classe DIV est nommée "tupian") et la largeur CSS et La hauteur CSS est commodément de 300 px et 100 px, toutes deux définissent des bordures noires de 1 px et placent une image à l'intérieur (la largeur d'origine de l'image est de 650 px et la hauteur est de 406 px). Et corrigez la largeur et la hauteur de l’image via CSS.

Tous les codes pour mettre à l'échelle l'image de la balise html img :

Le code n'affichera pas l'effet car l'image n'est pas placée, vous pouvez donc comprendre faites-le vous-même.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>图片缩小不变形实例 www.php.cn</title> 
<style> 
.tupian{ border:1px solid #000; width:300px; height:100px} 
.tupian img{width:300px; height:100px} 
</style> 
</head> 
 <body> 
<div class="tupian"> 
<img src="img.jpg" /> 
</div> 
</body> 
</html>

Copier après la connexion

Utilisez CSS pour fixer la hauteur et la largeur de l'image dans l'objet, de sorte que si l'image n'est pas réduite, l'image sera déformée.

Ce que j'ai dit avant est à peu près la même chose, commençons par le résumé maintenant :

Les images CSS DIV sont réduites sans déformation Résumé : La meilleure solution est de commencer à partir de la conception de l'image elle-même et transformez l'image. Concevez l'image pour qu'elle soit proportionnelle à la largeur et à la hauteur dans la mise en page. Par exemple, lorsque vous mettez en page l'image, la largeur est de 300 px et la hauteur est de 200 px. le matériau de l'image, la largeur et la hauteur de l'image que vous ajoutez peuvent être de 600 px de large, 400 px de haut ou 900 px de large et 600 px de haut, de sorte que des images de proportions égales puissent garantir que l'image réelle ne sera pas déformée après avoir été réduite et affichée. complètement.

【Recommandation de l'éditeur】

Comment définir la taille de la police de la balise de police html ? Introduction à l'utilisation de l'attribut de balise de police HTML

Quel est le code pour ajouter des images en HTML ? Comment ajouter correctement le chemin de l’image en HTML ?

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment redimensionner les images HTML proportionnellement ? Résumé des méthodes de mise à l'échelle des images HTML img (avec exemples)