Page Web HTML 5 image écran adaptatif img code de mise à l'échelle proportionnelle

Avec le développement fulgurant de l'internet mobile et l'utilisation généralisée du marketing WeChat , les téléphones portables sont devenus un outil essentiel de la vie .

Pour les modèles de sites web, nous recommandons d'utiliser les thèmes responsifs WordPress :

Que signifie l'adaptation d'image CSS ?

L'auto-adaptation d'image CSS fait référence à la création d'images dans la page Web html, via le code CSS :

Ensuite, Chen Weiliang partagera avec vous le code CSS permettant de redimensionner une image proportionnellement. ^_^

Code adaptatif de hauteur et de largeur d'image CSS

Insérer l'image en html :

Si vous souhaitez que l'image s'adapte à la petite taille de l'écran au lieu de rester fixe en largeur et en hauteur.

Vous pouvez ajouter le code suivant au fichier style.css de votre thème WordPress ▼

/*图片自适应宽度和高度*/ 
img { max-width: 100%; height: auto; width: auto\9; width: auto; }

déclaration icimax-widthrègle de largeur maximale

• pour s'assurer que toutes les images sont affichées à 100 % maximum (c'est-à-dire qu'elles ne peuvent être affichées qu'à la taille de leurs propres images).
• À ce stade, si l'élément contenant l'image (par exemple, le corps ou la div contenant l'image) est plus petit que la largeur inhérente de l'image, l'image sera mise à l'échelle pour remplir le maximum d'espace disponible.

width:auto;signifie largeur automatique

\9 C'est une façon d'écrire hack css.

• De cette façon, "\9" est ajouté au code css normal, seul le navigateur IE peut le reconnaître, les autres navigateurs ignoreront cette instruction.
• Cela permettra d'obtenir une différenciation des navigateurs, permettant l'utilisation de navigateurs compatibles.

Pourquoi ne pas utiliser largeur : 100 % ?

Pour obtenir une mise à l'échelle automatique des images, vous pouvez également utiliser les propriétés de largeur les plus couramment utilisées, par ex.width：100％.

Cependant, cette règle ne s'applique pas ici.

• Parce que cette règle le fera apparaître aussi large que son contenant.
• Dans les cas où le conteneur est beaucoup plus large que l'image, l'image sera étirée inutilement.

注意 事项

Que sont les sélecteurs CSS ? Quelle est la différence entre la classe et l'identifiant ?Les tutoriels suivants parlent de ▼

🔗Quelle est la différence entre la classe de sélecteur CSS et l'ID ? Utilisation de l'identifiant et de la classe en HTML

Comment le site Web mobile lit-il la vidéo MP4 en s'adaptant à la page ?Veuillez cliquer sur le lien ci-dessous ▼

🔗Comment adapter la page Web H5 MP4 à la page ? Le code HTML pour la lecture de vidéos sur les sites Web mobiles