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

En raison de l'essor de l'Internet mobile,Marketing WeChatLa popularité des téléphones portables est devenue生活outil incontournable.

créer un site Webmodèle, il est recommandé d'utiliserOutils de gestionThème adaptatif pour :

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 :

Prochain,Chen WeiliangJe vais partager avec vous le code de mise à l'échelle proportionnelle CSS img ^_^

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

Quelle est la différence entre la classe de sélecteur CSS et l'identifiant ? L'utilisation de l'identifiant et de la classe en HTML Chen Weiliang effectue actuellement le référencement et optimise le thème WordPress du site Web.Bien que j'aie appris quelques connaissances de base en HTML et CSS auparavant, mais je ne l'ai pas utilisé depuis un moment, en particulier la partie CSS...

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

Comment la page Web H5 MP4 s'adapte-t-elle à la page ? Le site Web mobile lit le code html de la vidéo

Le marketing vidéo fait partie intégrante du marketing en ligne : de nombreux praticiens de la promotion en ligne utilisent souvent la vidéo en combinaison avec le "marketing viral" pour générer du trafic.Si le marketing WeChat est combiné au marketing vidéo, il peut encore améliorer le taux de conversion de la rédaction des nouveaux médias et du commerce électronique social.J'ai beaucoup d'amis...