Bilder, Medien und Formularelemente

Ersetzte Elemente

Bilder und Videos werden als ersetzte Elemente beschrieben. Dies bedeutet, dass CSS das interne Layout dieser Elemente nicht beeinflussen kann – nur ihre Position auf der Seite inmitten anderer Elemente. 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 beschrieben betrachtet. Dies bedeutet, dass sie eine Größe in den horizontalen (x) und vertikalen (y) Dimensionen haben und standardmäßig mit den intrinsischen Dimensionen der Datei angezeigt werden.

Bilder dimensionieren

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

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

• 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 überläuft die Box.

<div class="wrapper">
  <div class="box">
    <img
      alt="star"
      src="/api/flow.js?q=https%3A%2F%2Fmdn.github.io%2Fshared-assets%2Fimages%2Fexamples%2Fbig-star.png" />
  </div>
  <div class="box">
    <img
      alt="balloons"
      src="/api/flow.js?q=https%3A%2F%2Fmdn.github.io%2Fshared-assets%2Fimages%2Fexamples%2Fballoons.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 in Größen von Elementen in CSS gelernt haben, besteht eine häufige Technik darin, die max-width des Bildes auf 100% zu setzen. Dadurch kann das Bild kleiner als die Box werden, aber nicht größer. Diese Technik funktioniert auch mit anderen ersetzten Elementen wie <video>s oder <iframe>s.

Versuchen Sie, max-width: 100% der <img> Elementregel 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.

Anzeigeprobleme bei Bildern mit object-fit behandeln

Das obige Beispiel deckt ein weiteres Set von Problemen bei der Anzeige von Bildern in Containern auf. Sie werden bemerken, dass nach dem Setzen von max-width: 100% auf die Bilder das zweite Bild seinen Container nicht ganz ausfüllt; es bleibt ein Spalt am Boden. Dies liegt daran, dass die Breite eines Bildes so eingestellt wird, dass sein Seitenverhältnis beibehalten wird, wenn eine bestimmte Breite angegeben wird.

Wie können wir das Bild so dimensionieren, dass es seinen Container vollständig abdeckt? Wir könnten den Container so einstellen, dass er eine feste width und height hat, und dann dem Bild eine width und height von 100% geben, wie im nächsten Beispiel gezeigt:

<div class="box">
  <img
    alt="balloons"
    src="/api/flow.js?q=https%3A%2F%2Fmdn.github.io%2Fshared-assets%2Fimages%2Fexamples%2Fballoons.jpg" />
</div>

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

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

Allerdings ist das Bild verzerrt, da sein Seitenverhältnis geändert wurde — es sieht gestreckt aus. Um dies zu beheben, können Sie die Eigenschaft object-fit verwenden, die festlegt, wie das Bild für seinen Container (dem <img>-Element) skaliert wird. Die object-fit-Eigenschaft kann einige verschiedene Werte annehmen, von denen die nützlichsten sind:

• cover: Das Bild füllt das <img>-Element vollständig aus und behält dabei sein Seitenverhältnis bei, daher werden einige Teile des Bildes nicht angezeigt.
• contain: Das Bild passt vollständig in das <img>-Element und behält dabei sein Seitenverhältnis bei, daher werden einige Teile des <img>-Elements nicht ausgefüllt. Dies führt zu "letterboxing" oder "pillarboxing".

Das nächste Beispiel zeigt die cover- und contain-Werte auf zwei Kopien des im vorherigen Beispiel gezeigten Bildes, sodass Sie sehen können, welche Auswirkungen sie haben:

<div class="wrapper">
  <div class="box">
    <img
      alt="balloons"
      class="cover"
      src="/api/flow.js?q=https%3A%2F%2Fmdn.github.io%2Fshared-assets%2Fimages%2Fexamples%2Fballoons.jpg" />
  </div>
  <div class="box">
    <img
      alt="balloons"
      class="contain"
      src="/api/flow.js?q=https%3A%2F%2Fmdn.github.io%2Fshared-assets%2Fimages%2Fexamples%2Fballoons.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;
}

Ersetzte Elemente im Layout

Wenn Sie verschiedene CSS-Layout-Techniken auf ersetzte Elemente anwenden, werden Sie möglicherweise feststellen, dass sie sich etwas anders als andere Elemente verhalten. Beispielsweise werden in einem Gitterlayout Elemente standardmäßig so gedehnt, dass sie ihre gesamten Gitterflächen ausfüllen. Bilder dehnen sich nicht aus; stattdessen sind sie auf den Anfang ihrer Gitterflächen ausgerichtet.

Sie können dies im folgenden Beispiel sehen, in dem wir einen zweispaltigen, zweireihigen Gittercontainer haben, der vier Elemente enthält. Alle <div>-Elemente haben eine Hintergrundfarbe und dehnen sich aus, um die Reihe und Spalte zu füllen. Das Bild dehnt sich jedoch nicht aus.

<div class="wrapper">
  <img
    alt="star"
    src="/api/flow.js?q=https%3A%2F%2Fmdn.github.io%2Fshared-assets%2Fimages%2Fexamples%2Fbig-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 jetzt, denken Sie einfach daran, dass ersetzte Elemente, wenn sie Teil eines spezifischen Layoutsystems wie Grid oder Flexbox werden, ein anderes Standardverhalten haben, im Grunde um zu vermeiden, dass sie seltsamerweise durch das Layout gedehnt werden.

Formularelemente

Formularelemente haben Probleme, wenn es darum geht, sie mit CSS zu gestalten. Das Web Forms Extensions Modul behandelt die schwierigeren Aspekte der Gestaltung bestimmter Formular-Eingabetypen, auf die wir hier nicht eingehen werden. Es gibt jedoch einige grundlegende Punkte, die in diesem Abschnitt hervorgehoben werden sollten.

Viele Formularsteuerelemente werden über das <input>-Element zu Ihrer Seite hinzugefügt — dies definiert einfache Formfelder wie Texteingaben bis hin zu komplexeren Feldern wie Farb- und Datumswählern. Es gibt einige zusätzliche Elemente, wie <textarea> für mehrzeilige Textinput, und auch Elemente, die verwendet werden, um Teile von Formularen zu enthalten und zu kennzeichnen, wie <fieldset> und <legend>.

HTML enthält auch Attribute, die Webentwicklern ermöglichen anzugeben, welche Felder erforderlich sind und sogar, welcher Art der Inhalt sein muss, 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 jedoch darin, wie viel Gestaltung und Anpassung sie für solche Elemente zulassen.

Textinput-Elemente gestalten

Elemente, die Texteingaben ermöglichen, wie <input type="text">, die spezifischeren <input type="email"> und das <textarea>-Element, sind ziemlich einfach zu gestalten und verhalten sich meist wie andere Boxen auf Ihrer Seite. Das Standardstyling dieser Elemente wird jedoch abhängig vom Betriebssystem und Browser, mit dem Ihr Benutzer die Seite besucht, unterschiedlich sein.

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

Versuchen Sie, das Beispiel zu bearbeiten, um das Aussehen des Formulars zu ändern, indem Sie die Ränder anpassen, Hintergrundfarben zu den Feldern hinzufügen und Schriftarten und Innenabstä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 black;
  margin-bottom: 1em;
  padding: 10px;
  width: 80%;
}

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

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

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 unterschiedliche Besucher ziemlich unterschiedlich aussehen und komplexe Formulare in mehreren Browsern testen.

Formularverhalten normalisieren

Formularelemente verhalten sich in verschiedenen Browsern und Betriebssystemen unterschiedlich. Dieser Abschnitt widmet sich einigen der häufigsten Probleme und bietet Strategien, um damit umzugehen.

Vererbung und Formularelemente

In einigen Browsern erben Formularelemente standardmäßig keine Schriftartstil. Daher, wenn Sie sicherstellen möchten, dass Ihre Formularfelder die auf dem body oder einem Elternelement definierte Schriftart verwenden, sollten Sie diese Regel in Ihr CSS aufnehmen.

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

Formularelemente und box-sizing

In verschiedenen Browsern verwenden Formularelemente unterschiedliche Box-Sizing-Regeln für verschiedene Widgets. Sie haben die Eigenschaft box-sizing in unserer Lektion zum Box-Modell kennengelernt und Sie können dieses Wissen beim Gestalten von Formularen nutzen, um eine konsistente Erfahrung beim Einstellen von Breiten und Höhen von Formularelementen zu gewährleisten.

Um Konsistenz zu erreichen, ist es eine gute Idee, Abstände und Innenabstände auf 0 bei allen Elementen zu setzen und diese dann beim Gestalten bestimmter Steuerelemente wieder hinzuzufügen:

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

Weitere nützliche Einstellungen

Zusätzlich zu den oben genannten 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;
}

Alles zusammen in ein "Reset" bringen

Als letzten Schritt können wir die besprochenen Eigenschaften in den folgenden "Formular-Reset" einpacken, um eine konsistente Basis zu schaffen, von der aus Sie arbeiten können. Dies umfasst alle in den letzten drei Abschnitten erwähnten Elemente:

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

textarea {
  overflow: auto;
}

Zusammenfassung

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 Ihnen einige Tests geben, die Sie verwenden können, um zu überprüfen, wie gut Sie die bereitgestellten Informationen zum Umgang mit Bildern und Formularelementen in CSS verstanden und behalten haben.

Siehe auch

• Styling von Webformularen
• Erweitertes Formularstyling

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