Bilder, Medien und Formularelemente

Bilder und Videos werden als ersetzte Elemente beschrieben. Das bedeutet, dass CSS das interne Layout dieser Elemente nicht beeinflussen kann — nur ihre Position auf der Seite zwischen 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 Seitenverhältnis beschrieben. Das bedeutet, dass es eine Größe sowohl in horizontaler (x) als auch vertikaler (y) Dimension hat und standardmäßig mit den intrinsischen Abmessungen der Datei angezeigt wird.

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

Im untenstehenden 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 füllt sie nicht aus.
• Die andere ist größer als 200 Pixel und überläuft die Box.

<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 also gegen das Überlaufproblem tun?

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

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

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

Die object-fit-Eigenschaft kann Ihnen hierbei helfen. Bei der Verwendung von object-fit kann das ersetzte Element auf verschiedene Arten dimensioniert werden, um in eine Box zu passen.

Unten verwendet das erste Beispiel den Wert cover, der das Bild verkleinert und dabei das Seitenverhältnis beibehält, so dass es die Box sauber füllt. Da das Seitenverhältnis beibehalten wird, werden einige Teile des Bildes von der Box beschnitten. Das zweite Beispiel verwendet contain als Wert: Dies skaliert das Bild so weit herunter, bis es klein genug ist, um in die Box zu passen. Dies führt zu einem "Briefkasten-Effekt", da es nicht dasselbe 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üllen wird, aber das Seitenverhältnis nicht beibehält.

Wenn Sie verschiedene CSS-Layouttechniken auf ersetzte Elemente anwenden, werden Sie möglicherweise feststellen, dass sie sich etwas anders als andere Elemente verhalten. Zum Beispiel werden in einem Grid-Layout Elemente standardmäßig gestreckt, um ihre gesamten Gitternetzbereiche auszufüllen. Bilder werden nicht gestreckt; stattdessen werden sie am Anfang ihrer Gitternetzbereiche ausgerichtet.

Dies kann man im Beispiel unten sehen, in dem wir einen Gitter-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 dehnt sich jedoch 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 das Layout erst in einem späteren Modul studieren. Für den Moment sollten Sie sich nur merken, dass ersetzte Elemente, wenn sie Teil eines spezifischen Layout-Systems wie Grid oder Flexbox werden, unterschiedliche Standardverhalten haben, um zu vermeiden, dass sie seltsam durch das Layout verzerrt werden.

Formularelemente können eine knifflige Angelegenheit sein, wenn es um das Styling mit CSS geht. Das Web Forms-Erweiterungsmodul behandelt die schwierigeren Aspekte des Stylings bestimmter Formulareingabetypen, auf die wir hier nicht eingehen werden. Es gibt jedoch einige grundlegende Punkte, die es wert sind, hier hervorgehoben zu werden.

Viele Formularsteuerungen werden auf Ihrer Seite durch das <input>-Element hinzugefügt — dies definiert einfache Formularfelder wie Texteingaben, bis hin zu komplexeren Feldern wie Farb- und Datumswähler. Es gibt einige zusätzliche Elemente, wie <textarea> für mehrzeilige 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 des Inhalts, der eingegeben werden muss. Wenn der Benutzer 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 die Eingabe von Text erlauben, wie <input type="text">, und die spezifischeren <input type="email">, sowie das <textarea>-Element sind recht einfach zu stylen und neigen dazu, sich genau wie andere Boxen auf Ihrer Seite zu verhalten. Die Standardgestaltung dieser Elemente hängt jedoch vom Betriebssystem und Browser ab, den der Benutzer verwendet, um die Seite zu besuchen.

Im untenstehenden Beispiel haben wir einige Texteingaben mit CSS gestaltet — Sie können sehen, dass Dinge wie Rahmen, Ränder und Abstände alle angewendet werden, wie Sie es erwarten würden. Wir verwenden Attributselektoren, um die verschiedenen Eingabetypen anzuzielen. Versuchen Sie, das Aussehen dieses Formulars zu ändern, indem Sie die Rahmen ändern, Hintergrundfarben zu den Feldern hinzufügen und 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 nicht zugänglich für Styling. Sie sollten daher immer davon ausgehen, dass Formulare bei verschiedenen Besuchern unterschiedlich aussehen und komplexe Formulare in mehreren Browsern testen.

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

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

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

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

Der Konsistenz halber ist es eine gute Idee, Ränder und Abstände auf 0 auf allen Elementen zu setzen und diese dann beim Stylen bestimmter Steuerelemente hinzufügen:

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

Zusätzlich zu den oben erwähnten Regeln sollten Sie auch overflow: auto auf <textarea>-Elementen setzen, um zu verhindern, dass einige ältere Browser einen Scrollbalken anzeigen, wenn kein Bedarf dafür besteht:

textarea {
  overflow: auto;
}

Als letzten Schritt können wir die verschiedenen oben besprochenen Eigenschaften in den folgenden "Formular-Reset" einfügen, um eine konsistente Basis zu schaffen, von der aus gearbeitet werden kann. 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 an die wichtigsten Informationen erinnern? Sie finden einige weitere Tests, um zu überprüfen, dass Sie diese Informationen behalten haben, bevor Sie weitermachen — siehe Testen Sie Ihr Wissen: Bilder und Formularelemente.

Diese Lektion hat einige der Unterschiede hervorgehoben, die Sie beim Arbeiten mit Bildern, Medien und anderen ungewöhnlichen Elementen in CSS antreffen werden.

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

• Styling von Webformularen
• Erweitertes Styling von Formularen

• Zurück
• Übersicht: Grundlagen der CSS-Gestaltung
• Weiter