Testen Sie Ihre Fähigkeiten: Bilder und Formularelemente

Das Ziel dieses Fähigkeitstests ist zu beurteilen, ob Sie verstehen, wie spezielle Elemente wie Bilder, Medien und Formularelemente in CSS behandelt werden.

Hinweis: Klicken Sie auf "Play" in den untenstehenden Codeblöcken, um die Beispiele im MDN Playground zu bearbeiten. Sie können den Code auch kopieren (klicken Sie auf das Clipboard-Symbol) und in einen Online-Editor wie CodePen, JSFiddle oder Glitch einfügen. Wenn Sie nicht weiterkommen, können Sie uns über einen unserer Kommunikationskanäle erreichen.

Aufgabe 1

In dieser Aufgabe haben Sie ein Bild, das über den Rahmen hinausgeht. Wir möchten, dass das Bild verkleinert wird, um in den Rahmen zu passen, ohne zusätzlichen weißen Raum, aber es macht uns nichts aus, wenn ein Teil des Bildes beschnitten wird.

Ihr Endergebnis sollte wie das untenstehende Bild aussehen:

Ein Bild in einem Rahmen

Versuchen Sie, den folgenden Code zu aktualisieren, um das fertige Beispiel so zu rekonstruieren, dass das Bild nicht über den Rahmen hinausgeht:

html
<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>
css
.box {
  border: 5px solid #000;
  width: 400px;
  height: 200px;
}

img {
  /* Add styles here */
}
Klicken Sie hier, um die Lösung anzuzeigen

Es ist in Ordnung, wenn einige Teile des Bildes beschnitten werden. Die Verwendung von object-fit: cover ist die beste Wahl, Sie müssen auch die Breite und Höhe auf 100% setzen:

css
img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

Aufgabe 2

In dieser Aufgabe haben Sie ein grundlegendes Formular. Ihre Aufgabe ist es, folgende Änderungen vorzunehmen:

  • Verwenden Sie Attributselektoren, um das Suchfeld und den Button innerhalb von .my-form zu selektieren.
  • Stellen Sie sicher, dass das Formularfeld und der Button die gleiche Textgröße wie der Rest des Formulars verwenden.
  • Geben Sie dem Formularfeld und dem Button 10px Padding.
  • Geben Sie dem Button einen Hintergrund in rebeccapurple, ein weißes Vordergrund, keinen Rahmen und abgerundete Ecken von 5px.

Ihr Endergebnis sollte wie das untenstehende Bild aussehen:

Ein einzeiliges Formular

Versuchen Sie, den folgenden Code zu aktualisieren, um das fertige Beispiel zu rekonstruieren:

html
<form action="" class="my-form" method="post">
  <div>
    <label for="fldSearch">Keywords</label>
    <input id="fldSearch" name="keywords" type="search" />
    <input name="btnSubmit" type="submit" value="Search" />
  </div>
</form>
css
body {
  font: 1.2em / 1.5 sans-serif;
}
.my-form {
  border: 2px solid #000;
  padding: 5px;
}
Klicken Sie hier, um die Lösung anzuzeigen

Hier ist ein Beispiel für die Lösung der Aufgabe:

css
.my-form {
  border: 2px solid #000;
  padding: 5px;
}

.my-form input[type="search"] {
  padding: 10px;
  font-size: inherit;
}

.my-form input[type="submit"] {
  padding: 10px;
  font-size: inherit;
  background-color: rebeccapurple;
  color: white;
  border: 0;
  border-radius: 5px;
}

Siehe auch