Comment gérer la distorsion CSS img

Solution à la distorsion CSS img : 1. Ouvrez le fichier CSS correspondant ; 2. Conservez la longueur et la largeur du contenu de l'élément d'origine en définissant "object-fit:none;".

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

Que faire si css img est déformé ?

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

Solution à faites en sorte que l'image s'adapte à la taille de l'écran, régler la largeur : 100 % entraînera un problème de distorsion de l'image

object-fit: none;    /*保留原有元素内容的长度和宽度*/

Si l'effet n'est pas évident, vous pouvez sélectionner une image avec du texte, vous pouvez très bien voir la différence de netteté

img{
      width:100%;
      max-width:100%;
      object-fit:none;
}

Mais attention, 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ée en position médiane

Extension associée :

En 1990, Tim Berners-Lee et Robert Cailliau conjointement a inventé le Web. En 1994, le Web sort véritablement du laboratoire.

Depuis l'invention du HTML, les styles existent sous diverses formes. Différents navigateurs combinent leurs propres langages de style pour permettre aux utilisateurs de contrôler les effets de page. Le code HTML original ne contenait que quelques attributs d'affichage.

Avec la croissance du HTML, afin de répondre aux exigences des concepteurs de pages, HTML a ajouté de nombreuses fonctions d'affichage. Mais à mesure que ces fonctions augmentent, le HTML devient de plus en plus complexe et les pages HTML deviennent de plus en plus volumineuses. C'est ainsi que CSS est né.

Hakun Lee a proposé la proposition originale du CSS en 1994. À l’époque, Bert Bos concevait un navigateur appelé Argo, ils ont donc décidé de concevoir CSS ensemble.

En fait, il y avait quelques suggestions pour unifier les langages de feuilles de style dans l'industrie Internet à cette époque, mais CSS a été le premier langage de feuille de style qui contenait le sens riche de « cascade ». En CSS, les styles d'un fichier peuvent être hérités d'autres feuilles de style. Le lecteur peut utiliser son propre style préféré à certains endroits et hériter ou « cascader » le style de l'auteur à d'autres endroits. Cette approche à plusieurs niveaux donne aux auteurs et aux lecteurs la flexibilité d'ajouter leurs propres conceptions et de mélanger ce que tout le monde aime.

Hakun a proposé CSS pour la première fois lors d'une conférence à Chicago en 1994. CSS a été proposé à nouveau lors de la conférence du réseau www en 1995. Boss a démontré l'exemple du navigateur Argo prenant en charge CSS, et Hakun a également présenté le navigateur Arena avec prise en charge CSS.

La même année, l'organisation W3C (World WideWeb Consortium) a été créée. Tous les membres créatifs CSS sont devenus le groupe de travail du W3C et ont tout mis en œuvre pour développer des normes CSS. Le développement des feuilles de style en cascade était enfin sur la bonne voie. De plus en plus de membres étaient impliqués, comme Thomas Reaxdon de Microsoft, dont les efforts ont finalement conduit à la prise en charge du standard CSS dans le navigateur Internet Explorer. Ha Kun, Persia et d'autres sont les principaux responsables techniques de ce projet. Fin 1996, la première ébauche de CSS a été achevée. En décembre de la même année, la première norme formelle pour les feuilles de style en cascade (Cascading style Sheets Level 1) a été achevée et est devenue une norme recommandée par le w3c.

Début 1997, le groupe de travail du W3C responsable du CSS a commencé à discuter de problèmes non abordés dans la première version. Les résultats des discussions ont constitué la deuxième édition de la spécification CSS publiée en mai 1998.

Apprentissage recommandé : "Tutoriel vidéo CSS"

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!