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 relativ zu anderen Elementen. Wie wir jedoch sehen werden, gibt es verschiedene Dinge, die CSS mit einem Bild machen kann.

Bestimmte ersetzte Elemente, wie Bilder und Videos, werden auch als Elemente mit einem Seitenverhältnis beschrieben. Das bedeutet, dass es eine Größe in sowohl der horizontalen (x) als auch der vertikalen (y) Dimension hat und standardmäßig mit den 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 setzen, die kleiner oder größer ist als die intrinsischen Abmessungen der Bilddatei in einer der beiden Richtungen, erscheint es entweder kleiner als die Box oder läuft über die Box hinaus. 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 zu füllen.
• Die andere ist größer als 200 Pixel und läuft über die Box hinaus.

<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 bei Größeneinheiten im CSS gelernt haben, besteht eine häufige Technik darin, die max-width eines Bildes auf 100% zu setzen. Dadurch wird das Bild kleiner als die Box und 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 sich das kleinere Bild nicht verändert, aber das größere wird kleiner, um in die Box zu passen.

Sie können auch andere Entscheidungen über Bilder in Containern treffen. Zum Beispiel möchten Sie möglicherweise ein Bild auf eine Größe bringen, die eine Box vollständig abdeckt.

Die Eigenschaft object-fit kann Ihnen dabei helfen. Bei der Verwendung von object-fit kann das ersetzte Element so dimensioniert werden, dass es eine Box auf verschiedene Weisen ausfüllt.

Unten nutzt das erste Beispiel den Wert cover, der das Bild so verkleinert, dass es das Seitenverhältnis beibehält und die Box sauber ausfüllt. Da das Seitenverhältnis beibehalten wird, werden einige Teile des Bildes von der Box abgeschnitten. Das zweite Beispiel nutzt contain als Wert: Dies skaliert das Bild herunter, bis es klein genug ist, um in die Box zu passen. Dadurch entsteht ein "Letterboxing", 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, welcher die Box ausfüllt, aber das Seitenverhältnis nicht beibehält.

Wenn Sie verschiedene CSS-Layout-Techniken auf ersetzte Elemente anwenden, werden Sie möglicherweise feststellen, dass sie sich leicht anders als andere Elemente verhalten. Zum Beispiel werden in einem Rasterlayout Elemente standardmäßig gestreckt, um ihre gesamten Rasterbereiche zu füllen. Bilder strecken sich nicht; stattdessen werden sie an den Anfang ihrer Rasterbereiche ausgerichtet.

Sie können dies im folgenden Beispiel sehen, wo wir einen zweispaltigen, zweireihigen Rastercontainer mit vier Elementen haben. Alle <div>-Elemente haben eine Hintergrundfarbe und strecken sich, um die ganze Reihe und Spalte zu füllen. Das Bild jedoch streckt sich nicht.

<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 dem Layout erst in einem späteren Modul befassen. Beachten Sie aber, dass ersetzte Elemente, wenn sie Teil eines bestimmten Layout-Systems wie Raster oder Flexbox werden, unterschiedliche Standardverhalten aufweisen, hauptsächlich um zu vermeiden, dass sie durch das Layout seltsam gedehnt werden.

Formularelemente können ein kniffliges Thema sein, wenn es um das Styling mit CSS geht. Das Web Forms-Erweiterungsmodul behandelt die kniffligeren Aspekte des Stylings bestimmter Formular-Eingabetypen, auf die wir hier nicht näher eingehen werden. Es gibt jedoch einige wesentliche Grundlagen, die es wert sind, in diesem Abschnitt hervorgehoben zu werden.

Viele Formularelemente werden durch das <input>-Element auf Ihrer Seite hinzugefügt — dieses 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, die zum Gruppieren und Beschriften von Formularteilen verwendet werden, wie <fieldset> und <legend>.

HTML enthält auch Attribute, die es Webentwicklern ermöglichen, anzugeben, welche Felder erforderlich sind, und sogar die Art der Inhalte, die eingegeben werden müssen. 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 Texteingaben zulassen, wie <input type="text">, und die spezifischeren <input type="email">, und das <textarea>-Element sind ziemlich einfach zu stylen und verhalten sich tendenziell wie andere Boxen auf Ihrer Seite. Das Standardstyling dieser Elemente unterscheidet sich jedoch abhängig vom Betriebssystem und dem Browser, den der Benutzer verwendet, um die Seite zu besuchen.

Im folgenden Beispiel haben wir einige Texteingaben mit CSS gestylt — Sie können sehen, dass Dinge wie Rahmen, Abstände und Auffüllungen wie erwartet angewendet werden. Wir verwenden Attributselektoren, um die verschiedenen Eingabetypen zu selektieren. Versuchen Sie, das Aussehen dieses Formulars zu ändern, indem Sie die Umrandungen anpassen, 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 dem 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. In diesem Abschnitt werden einige der häufigsten Probleme behandelt und Strategien zu deren Bewältigung vorgestellt.

In einigen Browsern erben Formularelemente die Schriftstile standardmäßig nicht. Wenn Sie daher sicherstellen möchten, dass Ihre Formularfelder die im body oder einem übergeordneten Element definierte Schriftart verwenden, sollten Sie diese Regel zu Ihrem CSS hinzufügen.

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

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

Für Konsistenz ist es eine gute Idee, Abstände und Auffüllungen auf 0 für alle Elemente zu setzen und diese dann bei der Gestaltung bestimmter Steuerelemente wieder hinzuzufü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>-Elemente setzen, um zu verhindern, dass einige ältere Browser eine Scrollleiste anzeigen, wenn keine benötigt wird:

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 schließt alle in den letzten drei Abschnitten genannten Punkte ein:

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 können einige weitere Tests finden, um zu überprüfen, ob Sie die Informationen behalten haben, bevor Sie weitermachen — siehe Test your skills: Images and form elements.

In dieser Lektion wurden einige der Unterschiede hervorgehoben, auf die Sie stoßen werden, wenn Sie mit Bildern, Medien und anderen ungewöhnlichen Elementen in CSS arbeiten.

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

• Styling von Webformularen
• Erweiterte Formularstyle

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