Wenn wir Interviews durchlaufen, werden uns häufig Fragen zum Layout gestellt. Oft kommt es darauf an, die Werte der Anzeigeeigenschaft aufzulisten oder die Elemente zu zentrieren. Das hat mich ehrlich gesagt gestört, und ich wollte meine eigenen Aufgaben entwickeln, mit deren Hilfe ich die Layoutfähigkeiten testen kann und nicht, wie er die Werte der Eigenschaften auswendig gelernt hat.
Aufgabenbeschreibung
Wenn ich Artikel im Internet lese, tritt häufig das folgende Problem auf: Der Text beginnt zu springen, wenn das Bild geladen wird.
Eine Lösung für dieses Problem besteht darin, einen Platzhalter für das Bild hinzuzufügen, bei dem das Verhältnis von Breite und Höhe das Seitenverhältnis des Bildes wiederholt.
Ich werde die Implementierung mit Markup beginnen:
<div class="post"> <img src="example.jpg" class="post__img" alt=" "> </div>
Um Bemaßungen für einen Platzhalter festzulegen, müssen Sie das Seitenverhältnis des Bildes kennen. Als Beispiel verwende ich die Bildgröße 1920x1080px.
Wenn Sie jedoch ein Bild dieser Größe anzeigen, wird es auf den meisten Bildschirmen mit horizontalem Bildlauf angezeigt. Daher werde ich das .post-Element auf eine maximale Breite von 640px einstellen und die Bildbreite daran anpassen.
.post { max-width: 640px; } .post__img { max-width: 100%; }
Ich werde der Seite einen Platzhalter hinzufügen, indem ich das vorhergehende Pseudoelement verwende. Sie müssen auch daran denken, das Bild darauf zu platzieren.
.post { max-width: 640px; position: relative; } .post::before { content: ""; } .post__img { max-width: 100%; position: absolute; top: 0; left: 0; }
Jetzt benötigen Sie die Breite des Platzhalters, um die Breite des Bildes zu wiederholen. Zuvor habe ich dafür gesorgt, dass das Bild 100% der Breite des übergeordneten .post-Elements einnimmt. Ich werde das gleiche für das Pseudoelement tun, indem ich ihm display: block hinzufüge.
.post { max-width: 640px; position: relative; } .post::before { content: ""; display: block; } .post__img { max-width: 100%; position: absolute; top: 0; left: 0; }
Freunde, damit habe ich meinen Teil der Arbeit beendet, und deine ist geblieben. Sie müssen die Höhe des vorherigen Pseudoelements berechnen.
Verwenden Sie dazu die Eigenschaft padding-top mit einem Prozentwert. Um dies korrekt durchzuführen, müssen Sie die Besonderheit der Berechnung des Interesses an der Eigenschaft padding-top kennen. Denken Sie auch daran, dass die Bildgrößen 1920 x 1080 Pixel betragen.
.post { max-width: 640px; position: relative; } .post::before { content: ""; display: block; } .post__img { max-width: 100%; position: absolute; top: 0; left: 0; }
Ich hoffe, dass Sie versuchen, dieses Problem selbst zu lösen. Aber wenn Schwierigkeiten auftauchen, gibt es unten meine Lösung.
Lösung
Die Eigenschaften "Auffüllen oben" und "Auffüllen unten" haben eine sehr nützliche Funktion. Wenn Sie die Werte in Prozent festlegen, werden sie aus der Breite des übergeordneten Blocks berechnet.
Wenn Sie dies wissen und sich an die Größe des Bildes (1920 x 1080 Pixel) erinnern, können Sie die Polsterung für den Platzhalter anhand der Proportionen berechnen:
padding-top = ( * 100%) / = (1080 * 100% ) / 1920 = 56.25%
Dabei sind Shi und Vi die Breite und Höhe des Bildes.
Es bleibt noch ein Wert für padding-top hinzuzufügen:
.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; }