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

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. .

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%;
}

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;    /*保留原有元素内容的长度和宽度*/

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;
}

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!