Testen Sie Ihre Fähigkeiten: Größenanpassung

Aufgabe 1

In dieser Aufgabe haben Sie zwei Boxen.

Um die Aufgabe abzuschließen:

1. Stellen Sie die Größe der ersten Box so ein, dass die Höhe mindestens 100px beträgt, auch wenn weniger Inhalt vorhanden ist, der sie auf diese Höhe wachsen lassen würde. Der Inhalt sollte jedoch nicht überlaufen, wenn mehr Inhalt vorhanden ist, als in 100 Pixel passt.
2. Testen Sie diese Box, indem Sie den Inhalt aus dem HTML entfernen, um sicherzustellen, dass Sie immer noch eine 100px hohe Box erhalten, auch ohne Inhalt.
3. Stellen Sie die Größe der zweiten Box so ein, dass sie fest 100px hoch ist, sodass der Inhalt überläuft, wenn zu viel vorhanden ist.

Ihr Endergebnis sollte wie das Bild unten aussehen:

<div class="box box1">
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
    corn soko endive gumbo gourd.
  </p>
</div>

<div class="box box2">
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
    corn soko endive gumbo gourd.
  </p>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
  padding: 1em;
}

.box {
  border: 5px solid black;
  width: 400px;
  margin-bottom: 1em;
}

.box1 {
  /* Add styles here */
}

.box2 {
  /* Add styles here */
}

.box1 {
  min-height: 100px;
}

.box2 {
  height: 100px;
}

Aufgabe 2

In dieser Aufgabe haben Sie eine Box, die eine andere Box enthält.

Um die Aufgabe abzuschließen:

1. Stellen Sie die Breite der inneren Box auf 60% der Breite der äußeren Box ein. Der Wert der box-sizing-Eigenschaft ist auf border-box gesetzt, was bedeutet, dass die Gesamtbreite jede Polsterung und den Rand einschließt.
2. Geben Sie der inneren Box eine Polsterung von 10%, wobei die Breite (oder die Inlinengröße) die Größe ist, von der dieser Prozentsatz berechnet wird.

Ihr Endergebnis sollte wie das Bild unten aussehen:

<div class="box">
  <div class="inner">Make me 60% of my parent's width.</div>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
  padding: 1em;
}

.box {
  border: 5px solid black;
  width: 400px;
  margin-bottom: 1em;
}

.inner {
  background-color: rebeccapurple;
  color: white;
  border-radius: 5px;
}

* {
  box-sizing: border-box;
}
.inner {
  /* Add styles here */
}

* {
  box-sizing: border-box;
}
.inner {
  width: 60%;
  padding: 10%;
}

Aufgabe 3

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.

Um die Aufgabe abzuschließen, stellen Sie sich vor, dass die Box ansprechend ist und daher wachsen und schrumpfen könnte. Wenden Sie eine Deklaration auf das Bild an, damit das große Bild in die Box schrumpft, das kleine Bild jedoch nicht gestreckt wird.

Ihr Endergebnis sollte wie die Bilder unten aussehen:

<div class="box">
  <img
    alt="A pink star"
    src="https://mdn.github.io/shared-assets/images/examples/star-pink_256x256.png" />
</div>

<div class="box">
  <img
    alt="Hot air balloons flying in clear sky, and a crowd of people in the foreground"
    src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
</div>

body {
  font: 1.2em / 1.5 sans-serif;
  padding: 1em;
}
.box {
  border: 5px solid black;
  margin-bottom: 1em;
  width: 500px;
}

img {
  /* Add styles here */
}

img {
  max-width: 100%;
}

• Zurück
• Übersicht: Grundlegende Informationen zur CSS-Gestaltung
• Weiter