Comment implémenter un conteneur adaptatif en CSS

Objectif :

Implémenter un conteneur adaptable en largeur dont la hauteur est la moitié de la largeur.

1. Réfléchissez à la façon de mettre en œuvre

Ce problème est similaire à : On est sur la page mobile, il y a une image avec une largeur de 100%, si on ne règle pas la hauteur , l'image sera basée sur la taille originale, mise à l'échelle proportionnelle.

Nous pouvons utiliser cette idée pour définir une hauteur proportionnelle correspondante pour l'élément en fonction de la hauteur de l'élément.

(Tutoriel recommandé : Tutoriel d'introduction CSS)

Méthode d'implémentation 1 - Implémentation via l'unité de fenêtre d'affichage vw

La soi-disant unité de fenêtre d'affichage ( unités de la fenêtre d'affichage) est relatif à la taille de la fenêtre d'affichage, 100vw est égal à 100 % de la largeur de la fenêtre d'affichage, c'est-à-dire que 1vw est égal à 1 % de la largeur de la fenêtre d'affichage.

Nous pouvons utiliser cette fonctionnalité pour implémenter des conteneurs adaptatifs largeur-hauteur du côté mobile.

Code HTML :

<div class="box">
    <img  src="http://images.pingan8787.com/2019_07_12guild_page.png" / alt="Comment implémenter un conteneur adaptatif en CSS" >
</div>

Code css :

*{
    margin:0;
    padding:0
}
.box{
    width:100%;
    height:51.5vw
}
.box img{ 
    width:100%; 
}

Pourquoi la hauteur de la .box est-elle de 51,5vw ?

La raison en est que la taille originale de l'image est le rapport hauteur/largeur de 884 * 455, soit 455/884 = 51,5 %.

Par rapport à la mise à l'échelle proportionnelle de l'image originale, cette méthode présente un avantage : que l'image soit chargée avec succès ou non, la hauteur du conteneur est toujours calculée, ce qui ne provoquera pas de gigue de page ni de redessinage de page, améliorant ainsi les performances.

Jetons un coup d'œil à la comparaison entre le chargement d'image réussi et échoué dans ce cas :

3.

Il est implémenté en définissant l'attribut padding de l'élément enfant, qui est plus couramment utilisé et a un meilleur effet. Ce qu'il faut comprendre ici est : la valeur du pourcentage de l'attribut padding de l'enfant. L'élément est d'abord basé sur la largeur du conteneur parent.

Regardez le code et les rendus ci-dessous pour comprendre :

Code HTML :

<div class="box">
    <div class="text">我是王平安，pingan8787</div>
</div>

code css :

.box{
    width: 200px;
}
.text{
    padding: 10%;
}

Analyse :

Ici, nous définissons la largeur du conteneur parent .box à 200px et le remplissage de l'élément enfant .text : 10 %, donc le résultat du calcul de remplissage de .box est de 20px ;

Ensuite, combiné au thème, nous utilisons ce principe pour réaliser le problème des proportions égales :

Code HTML :

<div class="box">
    <div class="text">
        <img  src="http://images.pingan8787.com/2019_07_12guild_page.png" / alt="Comment implémenter un conteneur adaptatif en CSS" >
    </div>
</div>

Code CSS :

.box{
    width: 100%;
}
.text{
    overflow: hidden;
    height: 0;
    padding-bottom: 51.5%;
}
.box .text img{
    width: 100%;
}

Ici.text padding-bottom : 51,5 % ; est également calculé selon la première méthode, en utilisant le rapport hauteur/largeur de la taille d'origine de l'image. Il convient de noter que le réglage de .text ici sur height : 0 ; la hauteur doit être supérieure à la hauteur réelle, donc afin d'éviter Dans ce cas, vous devez définir la hauteur : 0 ;.

Tutoriels vidéo associés recommandés : Tutoriel vidéo CSS

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!