Überprüfen Sie Ihre Fähigkeiten: Größenanpassung

In dieser Aufgabe haben Sie zwei Boxen. Die erste sollte so dimensioniert sein, dass die Höhe mindestens 100 Pixel beträgt, selbst wenn der Inhalt kleiner ist, sodass er nicht ausreicht, um die Höhe zu erreichen. Der Inhalt sollte jedoch nicht überlaufen, wenn mehr Inhalt vorhanden ist als in 100 Pixel passt. Testen Sie diese Box, indem Sie den Inhalt aus dem HTML entfernen, um sicherzustellen, dass Sie immer noch eine 100 Pixel hohe Box erhalten, selbst ohne Inhalt.

Die zweite Box sollte fest auf 100 Pixel Höhe eingestellt sein, sodass der Inhalt überläuft, wenn er zu groß ist.

Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:

In dieser Aufgabe haben Sie eine Box, die eine weitere Box enthält. Ihre Aufgabe ist es, die innere Box 60% der Breite der äußeren Box groß zu machen. Der Wert der box-sizing-Eigenschaft ist auf border-box eingestellt, was bedeutet, dass die Gesamtbreite Polster und Rahmen einschließt. Sie sollten der inneren Box auch einen Abstand von 10% in Bezug auf die Breite (oder Inline-Größe) geben, von welcher dieser Prozentwert berechnet wird.

Ihr Endergebnis sollte wie das unten stehende Bild aussehen:

Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:

In dieser Aufgabe haben Sie zwei Bilder in Boxen. Ein Bild ist kleiner als die Box, das andere ist größer und bricht aus der Box heraus. Wenn Sie sich vorstellen, dass die Box responsiv ist und daher wachsen und schrumpfen könnte, welche Eigenschaft würden Sie auf das Bild anwenden, damit das große Bild in die Box schrumpft, aber das kleine Bild nicht gestreckt wird.

Ihr Endergebnis sollte wie die unten stehenden Bilder aussehen:

Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden: