Auge: Responsive Design Bilder automatisch anpassen

Beitrag lesen

SELF-Forum

Responsive Design Bilder automatisch anpassen

Auge
– Informationen zu den Bewertungsregeln

Hallo

Ein Teil der Lösung heißt Media Queries. Mit ihnen bestimmst du Abschnitte in der CSS-Datei, die für bestimmte Abmessungen des Viewports gelten. Regeln, die in diesen Abschnitten notiert sind und be anderen Abmessungen nicht mehr oder mit anderen Werten gültig sein sollen, müssen in den betreffenden Abschnitten explizit überschrieben werden.

Für die fragliche Regel wäre eine Abgrenzung nach oben richtig. Beispiel:

img {
  height: auto;
  max-width: 100%;
}
@media all and (min-width: 50em) {
  img {
    height: auto;
    max-width: 25em;
  }
}

Zudem gehört in den <head> des HTML-Dokuments die Angabe <meta name="viewport" content="width=device-width, initial-scale=1.0">, damit Mobilbrowser wissen, dass sie das Dokument nicht als Desktopsimulation mit einer virtuellen Breite von 900px darstellen sollen.

Weiterhin gibt es für <img> das Attribut srcset und das Element <picture>, um z.B. für Smartphone-Displays unnötig hochaufgelöste Bilder, die für den FullHD-Desktop gedacht sind, herunterladen zu müssen.

Tschö, Auge

--
Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
Toller Dampf voraus von Terry Pratchett
Beitrag melden
–
Informationen zu den Bewertungsregeln