Lorsque nous passons par des entretiens, on nous pose souvent des questions sur la mise en page. Souvent, ils se résument à répertorier les valeurs de la propriété d'affichage ou à centrer les éléments. Cela m'a vraiment dérangé, et je voulais trouver mes propres tâches, avec l'aide desquelles je peux tester les compétences de mise en page, et non comment il a mémorisé les valeurs des propriétés.
Description de la tâche
Souvent, lorsque je lis des articles sur Internet, je rencontre le problème suivant: le texte se met à sauter lorsque l'image est chargée.
Une solution à ce problème consiste à ajouter un espace réservé pour l'image, dans lequel le rapport de largeur et de hauteur répétera le rapport d'aspect de l'image.
Je vais commencer sa mise en œuvre avec du balisage:
<div class="post"> <img src="example.jpg" class="post__img" alt=" "> </div>
Pour définir les dimensions d'un espace réservé, vous devez connaître le rapport hauteur / largeur de l'image. Pour un exemple, j'utiliserai la taille d'image 1920x1080px.
Mais si vous affichez une image de cette taille, alors sur la plupart des écrans, elle sera affichée avec un défilement horizontal. Par conséquent, je définirai l'élément .post sur une largeur maximale de 640 pixels, et la largeur de l'image s'y ajustera.
.post { max-width: 640px; } .post__img { max-width: 100%; }
Je vais ajouter un espace réservé à la page en utilisant le pseudo-élément avant. Vous devez également vous rappeler de placer l'image dessus.
.post { max-width: 640px; position: relative; } .post::before { content: ""; } .post__img { max-width: 100%; position: absolute; top: 0; left: 0; }
Vous avez maintenant besoin de la largeur de l'espace réservé pour répéter la largeur de l'image. Plus tôt, j'ai fait en sorte que l'image occupe 100% de la largeur de l'élément parent .post. Je ferai de même pour le pseudo-élément avant en y ajoutant display: block.
.post { max-width: 640px; position: relative; } .post::before { content: ""; display: block; } .post__img { max-width: 100%; position: absolute; top: 0; left: 0; }
Mes amis, j'ai terminé ma partie du travail et la vôtre est restée. Vous devez calculer la hauteur du pseudo-élément avant.
Pour ce faire, utilisez la propriété padding-top avec une valeur en pourcentage. Pour ce faire correctement, vous devez connaître la particularité de calculer l'intérêt pour la propriété padding-top. Et rappelez-vous également que les tailles d'image sont de 1920x1080px.
.post { max-width: 640px; position: relative; } .post::before { content: ""; display: block; } .post__img { max-width: 100%; position: absolute; top: 0; left: 0; }
J'espère que vous essayez de résoudre ce problème vous-même. Mais si des difficultés surviennent, voici ma solution ci-dessous.
Solution
Les propriétés padding-top et padding-bottom ont une caractéristique très utile. Si vous définissez les valeurs en pourcentage, elles seront calculées à partir de la largeur du bloc parent.
En conséquence, sachant cela et se souvenant de la taille de l'image (1920x1080px), vous pouvez calculer le remplissage du haut pour l'espace réservé en utilisant la proportion:
padding-top = ( * 100%) / = (1080 * 100% ) / 1920 = 56.25%
où Shi et Vi sont la largeur et la hauteur de l'image.
Il reste à ajouter une valeur pour padding-top:
.post { max-width: 640px; position: relative; } .post::before { content: ""; display: block; padding-top: 56.25%; } .post__img { max-width: 100%; position: absolute; top: 0; left: 0; }