Maison > interface Web > Questions et réponses frontales > Que faire si les images HTML sont déformées

Que faire si les images HTML sont déformées

藏色散人
Libérer: 2023-01-04 09:36:01
original
5578 Les gens l'ont consulté

Solution à la distorsion de l'image HTML : ouvrez d'abord le fichier HTML correspondant ; puis recherchez l'image introduite par HTML img ; enfin, ajoutez l'attribut "object-fit:none;" problème. .

Que faire si les images HTML sont déformées

L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.

Largeur du style CSS : 100 % de distorsion de l'image

L'écran est de 1920 pixels, définissez la largeur de l'img : 1920px taille fixe, l'image n'est pas déformée, définissez la largeur : 100% de distorsion de l'image

img{
      display:block;  /*img图片比父元素高度小几个像素,设置为块元素,使得父子div高度一致*/
      width:100%;
}
Copier après la connexion

Résoudre le problème de distorsion de l'image provoqué par le réglage de la largeur: 100% afin d'adapter l'image à la taille de l'écran

object-fit: none;    /*保留原有元素内容的长度和宽度*/
Copier après la connexion

Si l'effet n'est pas évident, vous pouvez sélectionner une image avec du texte, qui est bien visible. Il y a une différence de netteté

img{
      width:100%;
      max-width:100%;
      object-fit:none;
}
Copier après la connexion

Mais veuillez noter qu'après avoir défini object-fit:none, lorsque la taille de l'écran est plus petite que la taille de l'image, l'image sera automatiquement recadré en position médiane

[Apprentissage recommandé : Tutoriel vidéo 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!

Étiquettes associées:
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