Comment puis-je rendre les images d'arrière-plan réactives à l'aide de CSS ?

Obtenir des images d'arrière-plan réactives avec CSS

Dans la conception Web, il est souvent souhaitable d'avoir des images d'arrière-plan qui s'adaptent dynamiquement aux différentes tailles d'écran. Pour y parvenir, vous souhaitez que la largeur de l'image s'adapte à l'espace disponible, tout en préservant ses proportions et en redimensionnant la hauteur proportionnellement.

Utilisation de background-size: cover;

Pour ce faire, CSS3 propose la propriété background-size. Plus précisément, le définir sur cover garantit que l'image d'arrière-plan s'agrandit pour remplir tout l'espace disponible, en conservant ses proportions. L'image sera recadrée verticalement si nécessaire pour s'adapter, permettant un défilement vertical sans répétition horizontale.

Voici un exemple de code qui démontre cela :

body {
    background-image: url(images/background.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

Comment le contenu et la couverture diffèrent

Contenir : Redimensionne l'image pour qu'elle s'adapte entièrement à la zone de positionnement d'arrière-plan tout en préservant ses proportions. Cela peut entraîner des espaces vides autour de l'image.

Couverture : Redimensionne l'image pour couvrir toute la zone de positionnement de l'arrière-plan tout en conservant ses proportions. Cela peut entraîner le recadrage de l'image pour l'adapter.

Comprendre l'impact visuel

Considérons qu'une image avec une résolution de 4x3 est utilisée comme arrière-plan pour un écran 16x9.

Contient : L'image s'adapte à l'écran mais laisse un espace vide sur l'un ou l'autre côté.

Couverture : L'image couvre tout l'écran mais coupe une partie en haut et en bas.

Pour illustrer cette différence, voici une démonstration :

<div class="contain">
    <!-- Background image will fit, leaving empty space -->
</div>
<div class="cover">
    <!-- Background image will cover, cropping as needed -->
</div>

.contain, .cover {
    width: 20em;
    height: 10em;
    background-image: url(example.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #ccc;
    border: 1px solid;
}

.contain {
    background-size: contain;
}

.cover {
    background-size: cover;
}

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!