À propos de la méthode d'affichage réactif et centré de l'image de la bannière CSS

Cet article présente principalement la méthode d'affichage central réactif de l'image de la bannière CSS. L'éditeur pense qu'elle est plutôt bonne, je vais donc la partager avec vous maintenant et la donner comme référence. Suivons l'éditeur et jetons un coup d'œil.

Sur la page d'accueil d'un site Web PC, l'image de la bannière est la plus grande image de la page Web. Tout en véhiculant les informations principales de la page Web, elle attire également toute l'attention des utilisateurs. le spectateur. Par conséquent, la façon dont l’image de la bannière est affichée affecte directement l’expérience utilisateur. Aujourd’hui, nous allons parler de la façon de centrer l’image de la bannière dans les fenêtres de différentes tailles

Nous savons tous que l’image peut être centrée. via l'affichage de l'attribut background-size: cover;, mais lors du processus d'étirement de la fenêtre, l'image devient souvent terrible avec l'étirement, nous pouvons donc séparer l'image et masquer les deux côtés de l'image pour obtenir l'affichage centré de l'image de la bannière. à différentes tailles. Le but de la

La structure HTML est la suivante

<p class="banner">
    ![](img/banner.jpg)
</p>

Le style CSS est le suivant

body {
    overflow-x: hidden;
}
.banner {
    width: 1210px;
    margin: 0 auto;
}
.banner img {
    width: 1920px;
    margin: 0 -355px;
    vertical-align: middle;
}

Lorsque la largeur de la fenêtre d'affichage et la largeur de l'image sont identiques à 1920 px, le gâteau Nian est exactement au centre de la vue et l'effet de page est comme indiqué ci-dessous

largeur : 1920px

Lorsque la largeur de la fenêtre d'affichage est de 1210 px, le gâteau Nian est toujours affiché au centre de la vue, comme le montre la figure ci-dessous

width:1210px

Le contenu de cet article se termine ici. J'ai envoyé le code source au centre de réponse GitHubBanner. Les étudiants dans le besoin peuvent le télécharger. par eux-mêmes

Fin du fichier

Il est inévitable que des erreurs ou des inexactitudes apparaissent dans le processus d'écriture. J'espère que tout le monde pourra me corriger afin de ne pas induire davantage de personnes en erreur. .

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Exemple de modèle de boîte CSS

Comment utiliser les valeurs de marge négatives en CSS pour ajuster la position centrale

CSS pour obtenir l'effet du texte entourant les images

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!