Comment rendre les images réactives et conserver un arrière-plan plein écran avec « background-size: cover » ?

Redimensionner automatiquement les images avec la taille du navigateur à l'aide de CSS

Dans cette question, l'objectif est de redimensionner automatiquement les images lorsque la fenêtre du navigateur est redimensionnée , tout en conservant un design plein écran avec un effet background-size: cover.

Pour y parvenir, modifiez simplement le code CSS comme suit :

<code class="css">img {
    max-width: 100%;
    height: auto;
    width: auto; /* ie8 */
}</code>

En définissant la max-width à 100 % et hauteur sur auto, les images s'adapteront à la taille de la fenêtre du navigateur. La largeur : auto9 ; La règle est spécifiquement destinée à IE8 pour garantir un comportement cohérent entre les navigateurs.

De plus, l'image d'arrière-plan peut se voir attribuer la propriété background-size: cover pour créer un effet plein écran :

<code class="css">body {
    ...
    background-size: cover;
}</code>

Avec ces modifications, les images seront redimensionnées automatiquement tout en conservant l'effet d'arrière-plan spécifié, garantissant un design entièrement réactif.

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!