Bilder, Medien und Formularelemente

Bilder und Videos werden als ersetzte Elemente bezeichnet. Das bedeutet, dass CSS das interne Layout dieser Elemente nicht beeinflussen kann — nur ihre Position auf der Seite unter anderen Elementen. Wie wir jedoch sehen werden, gibt es verschiedene Dinge, die CSS mit einem Bild tun kann.

Bestimmte ersetzte Elemente, wie Bilder und Videos, werden auch als mit einem Seitenverhältnis versehen beschrieben. Das bedeutet, dass es eine Größe sowohl in den horizontalen (x) als auch vertikalen (y) Dimensionen hat und standardmäßig unter Verwendung der intrinsischen Abmessungen der Datei angezeigt wird.

Wie Sie aus diesen Lektionen bereits wissen, erzeugt alles in CSS eine Box. Wenn Sie ein Bild in eine Box platzieren, die in einer Richtung kleiner oder größer als die intrinsischen Abmessungen der Bilddatei ist, wird es entweder kleiner als die Box erscheinen oder aus der Box herausfließen. Sie müssen eine Entscheidung darüber treffen, was mit dem Überlauf passiert.

Im folgenden Beispiel haben wir zwei Boxen, beide 200 Pixel groß:

• Eine enthält ein Bild, das kleiner als 200 Pixel ist — es ist kleiner als die Box und dehnt sich nicht aus, um sie auszufüllen.
• Das andere ist größer als 200 Pixel und fließt aus der Box heraus.

<div class="wrapper">
  <div class="box">
    <img
      alt="star"
      src="https://mdn.github.io/shared-assets/images/examples/big-star.png" />
  </div>
  <div class="box">
    <img
      alt="balloons"
      src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
  </div>
</div>

.wrapper {
  display: flex;
  align-items: flex-start;
}

.wrapper > * {
  margin: 20px;
}

.box {
  border: 5px solid darkblue;
  width: 200px;
}

img {
}

Was können wir gegen das Überlaufproblem tun?

Wie wir im Größenanpassung von Elementen in CSS gelernt haben, ist eine häufige Technik, die max-width des Bildes auf 100% zu setzen. Dies ermöglicht es, dass das Bild kleiner als die Box wird, aber nicht größer. Diese Technik funktioniert auch mit anderen ersetzten Elementen wie <video>s oder <iframe>s.

Versuchen Sie, max-width: 100% zur <img> Elementregel im obigen Beispiel hinzuzufügen. Sie werden sehen, dass das kleinere Bild unverändert bleibt, aber das größere kleiner wird, um in die Box zu passen.

Sie können andere Entscheidungen über Bilder innerhalb von Containern treffen. Zum Beispiel möchten Sie vielleicht ein Bild so dimensionieren, dass es eine Box vollständig abdeckt.

Die object-fit Eigenschaft kann Ihnen dabei helfen. Beim Verwenden von object-fit kann das ersetzte Element auf verschiedene Weise an eine Box angepasst werden.

Unten verwendet das erste Beispiel den Wert cover, der das Bild auf die Größe reduziert und das Seitenverhältnis beibehält, sodass es die Box ordentlich ausfüllt. Da das Seitenverhältnis beibehalten wird, werden einige Teile des Bildes durch die Box abgeschnitten. Das zweite Beispiel verwendet contain als Wert: dies skaliert das Bild nach unten, bis es klein genug ist, um in die Box zu passen. Dies führt zu "Letterboxing", da es nicht das gleiche Seitenverhältnis wie die Box hat.

<div class="wrapper">
  <div class="box">
    <img
      alt="balloons"
      class="cover"
      src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
  </div>
  <div class="box">
    <img
      alt="balloons"
      class="contain"
      src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
  </div>
</div>

.wrapper {
  display: flex;
  align-items: flex-start;
}

.wrapper > * {
  margin: 20px;
}

.box {
  border: 5px solid darkblue;
  width: 200px;
  height: 200px;
}

img {
  height: 100%;
  width: 100%;
}

.cover {
  object-fit: cover;
}

.contain {
  object-fit: contain;
}

Sie könnten auch den Wert fill ausprobieren, der die Box ausfüllt, aber das Seitenverhältnis nicht beibehält.

Wenn Sie verschiedene CSS-Layout-Techniken auf ersetzte Elemente anwenden, können Sie feststellen, dass sie sich geringfügig anders verhalten als andere Elemente. In einem Grid-Layout zum Beispiel werden Elemente standardmäßig gestreckt, um ihre gesamten Gitterbereiche auszufüllen. Bilder werden nicht gestreckt; stattdessen werden sie am Anfang ihrer Gitterbereiche ausgerichtet.

Sie können dies im folgenden Beispiel sehen, wo wir einen Grid-Container mit zwei Spalten und zwei Reihen haben, der vier Elemente enthält. Alle <div> Elemente haben eine Hintergrundfarbe und dehnen sich aus, um die Reihe und Spalte auszufüllen. Das Bild jedoch dehnt sich nicht aus.

<div class="wrapper">
  <img
    alt="star"
    src="https://mdn.github.io/shared-assets/images/examples/big-star.png" />
  <div></div>
  <div></div>
  <div></div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 100px;
  gap: 20px;
}

.wrapper > div {
  background-color: rebeccapurple;
  border-radius: 0.5em;
}

Sie werden sich mit Layouts erst in einem späteren Modul befassen. Für den Moment sollten Sie nur im Hinterkopf behalten, dass ersetzte Elemente, wenn sie Teil eines bestimmten Layoutsystems wie Grid oder Flexbox werden, unterschiedliche Standardverhaltensweisen aufweisen, um zu vermeiden, dass sie vom Layout seltsam gestreckt werden.

Formularelemente haben Probleme, wenn es darum geht, mit CSS gestylt zu werden. Das Web Forms Extensions Modul behandelt die schwierigeren Aspekte des Stylens bestimmter Formulareingabetypen, auf die wir hier nicht weiter eingehen werden. Es gibt jedoch einige grundlegende Punkte, die in diesem Abschnitt hervorgehoben werden sollten.

Viele Formularelemente werden durch das <input> Element auf Ihrer Seite hinzugefügt — dies definiert einfache Formularfelder wie Texteingaben bis hin zu komplexeren Feldern wie Farbe und Datumsauswahl. Es gibt einige zusätzliche Elemente, wie <textarea> für mehrzeiligen Texteingaben und auch Elemente zur Gruppierung und Beschriftung von Teilen von Formularen wie <fieldset> und <legend>.

HTML enthält auch Attribute, die es Webentwicklern ermöglichen, anzugeben, welche Felder erforderlich sind und sogar die Art der einzugebenden Inhalte. Wenn der Nutzer etwas Unerwartetes eingibt oder ein erforderliches Feld leer lässt, kann der Browser eine Fehlermeldung anzeigen. Verschiedene Browser unterscheiden sich darin, wie viel Styling und Anpassung sie für solche Elemente zulassen.

Elemente, die Texteingabe erlauben wie <input type="text">, das spezifischere <input type="email">, und das <textarea> Element, sind relativ einfach zu stylen und verhalten sich in der Regel wie andere Boxen auf Ihrer Seite. Das Standard-Styling dieser Elemente unterscheidet sich jedoch je nach Betriebssystem und Browser, den Ihr Nutzer zur Site besucht.

Im folgenden Beispiel haben wir einige Texteingaben mit CSS gestylt. Sie können sehen, dass Dinge wie Rahmen, Ränder und Abstände genauso angewendet werden, wie Sie es erwarten würden. Wir verwenden Attributselektoren, um die verschiedenen Eingabetypen anzusprechen.

Versuchen Sie, das Beispiel zu bearbeiten, um das Erscheinungsbild des Formulars zu ändern, indem Sie die Rahmen anpassen, Hintergrundfarben zu den Feldern hinzufügen und die Schriftarten und Abstände ändern.

<form>
  <div><label for="name">Name</label> <input id="name" type="text" /></div>
  <div><label for="email">Email</label> <input id="email" type="email" /></div>

  <div class="buttons"><input type="submit" value="Submit" /></div>
</form>

body {
  font-family: sans-serif;
}
form > div {
  display: flex;
}

label {
  width: 10em;
}

.buttons {
  justify-content: center;
}

input[type="text"],
input[type="email"] {
  border: 2px solid #000;
  margin: 0 0 1em 0;
  padding: 10px;
  width: 80%;
}

input[type="submit"] {
  border: 3px solid #333;
  background-color: #999;
  border-radius: 5px;
  padding: 10px 2em;
  font-weight: bold;
  color: #fff;
}

input[type="submit"]:hover,
input[type="submit"]:focus {
  background-color: #333;
}

Viele der komplexeren Eingabetypen werden vom Betriebssystem gerendert und sind für das Styling nicht zugänglich. Sie sollten daher immer davon ausgehen, dass Formulare für verschiedene Besucher unterschiedlich aussehen und komplexe Formulare in mehreren Browsern testen.

Formularelemente verhalten sich in verschiedenen Browsern und Betriebssystemen unterschiedlich. Dieser Abschnitt befasst sich mit einigen der häufigsten Probleme und bietet Strategien zu deren Bewältigung.

In einigen Browsern erben Formularelemente standardmäßig keine Schriftstil-Eigenschaften. Wenn Sie also sicherstellen möchten, dass Ihre Formularfelder die auf dem Body oder einem übergeordneten Element definierte Schrift verwenden, sollten Sie diese Regel zu Ihrem CSS hinzufügen.

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
}

In verschiedenen Browsern verwenden Formularelemente unterschiedliche Box-Sizing-Regeln für verschiedene Widgets. Sie haben in unserer Box-Modell-Lektion über die box-sizing Eigenschaft gelernt, und Sie können dieses Wissen beim Stylen von Formularen verwenden, um ein konsistentes Erlebnis zu gewährleisten, wenn Sie Breiten und Höhen auf Formularelementen festlegen.

Für Konsistenz ist es eine gute Idee, Ränder und Abstände auf 0 für alle Elemente zu setzen und diese bei der Gestaltung bestimmter Steuerungen wieder hinzuzufügen:

button,
input,
select,
textarea {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

Zusätzlich zu den oben genannten Regeln sollten Sie overflow: auto auf <textarea> Elementen setzen, um zu verhindern, dass einige ältere Browser eine Scrollleiste anzeigen, wenn sie nicht erforderlich ist:

textarea {
  overflow: auto;
}

Als letzten Schritt können wir die verschiedenen oben diskutierten Eigenschaften in den folgenden "Formular-Reset" einpacken, um eine konsistente Basis zu schaffen. Dies umfasst alle in den letzten drei Abschnitten erwähnten Punkte:

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

textarea {
  overflow: auto;
}

Sie haben das Ende dieses Artikels erreicht, aber können Sie sich die wichtigsten Informationen merken? Sie finden einige weitere Tests, um zu überprüfen, ob Sie diese Informationen gespeichert haben, bevor Sie weitermachen — siehe Testen Sie Ihr Wissen: Bilder und Formularelemente.

Diese Lektion hat einige der Unterschiede hervorgehoben, die Sie bei der Arbeit mit Bildern, Medien und anderen ungewöhnlichen Elementen in CSS begegnen werden.

Im nächsten Artikel werden wir lernen, wie man HTML-Tabellen stylt.

• Styling von Webformularen
• Fortgeschrittenes Styling von Formularen

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