Was wäre, wenn wir bildschirmfüllende Bilder durch fast nichts bekommen könnten?

Nehmen wir an, Sie haben ein Bild, das Sie in einem <img> verwenden, das 800 × 600 Pixel groß ist. Wird es auf Ihrer Website tatsächlich 800 Pixel breit angezeigt? Es ist *sehr wahrscheinlich*, dass dies nicht der Fall sein wird. Wir neigen dazu, Bilder in flexible Containerelemente zu packen, und das Bild darin wird auf width: 100%; gesetzt. Möglicherweise ist das Bild dann 721 Pixel breit oder 381 Pixel breit oder was auch immer. Was sich *nicht* ändert, ist das Seitenverhältnis dieses Bildes, es sei denn, Sie quetschen es unbeholfen zusammen (unter Berücksichtigung des Spezialfalls von object-fit).

Der Hauptpunkt ist, dass wir nicht wissen, wie viel vertikalen Platz ein Bild einnehmen wird, bis dieses Bild geladen ist. Das ist die Ursache für Ruckler! Schreckliche Ruckler! Sie sind überall und furchtbar.

Update! Das ist tatsächlich passiert. Sie müssen also nur die richtigen Attribute für Breite und Höhe des Originalbilds angeben, und sie werden ohne Ruckler geladen, selbst wenn CSS das Bild flexibel macht. Tun Sie es also so: <img src="image.jpg" width="800" height="600">

Es gibt heute Möglichkeiten, Elemente mit festem Seitenverhältnis in HTML/CSS zu erstellen. Keine der Optionen ist besonders elegant, da sie auf dem "Hack" basieren, eine Höhe von Null einzustellen und die Höhe der Elemente durch Polsterung zu erzwingen. Wäre es nicht schöner, eine Plattformfunktion zu haben, die uns hier hilft? Der erste Ansatz zur Lösung dieses Problems, den ich kenne, ist das Attribut intrinsicsize. Eric Portis hat in Jank-Free Image Loads beschrieben, wie das wunderbar funktioniert.

Wir würden das bekommen

<img src="image.jpg" intrinsicsize="800x600" />

Dies ist derzeit hinter einem Flag in Chrome 71+ versteckt und löst dieses Problem wirklich.

Aber...

Die Eigenschaft intrinsicsize ist brandneu. Sie hilft nur auf Websites, auf denen die Entwickler davon wissen und sich die Mühe machen, sie zu implementieren. Und sie ist knifflig! Bilder werden tendenziell beliebig dimensioniert, und das Attribut intrinsicsize muss für jedes Bild individuell angepasst werden, um korrekt zu sein und seine Aufgabe zu erfüllen. Das heißt, wenn es überhaupt in die Standards aufgenommen wird.

Es gibt eine weitere Möglichkeit! Eric sprach auch über die CSS-Eigenschaft aspect-ratio als potenzielle Lösung. Es ist auch noch nur eine Entwurfsspezifikation. Man könnte sagen, aber wie ist das hilfreich? Es muss genauso maßgeschneidert sein wie intrinsicsize, was bedeutet, dass man es als Inline-Styles verwenden müsste, um hilfreich zu sein. Vielleicht ist das nicht so schlimm, wenn es ein großes Problem löst, aber Inline-Styles sind ein solcher Aufwand beim Überschreiben, und es scheint, dass der HTML-Attributansatz mehr dem Geist von Bildern entspricht. Denken Sie daran, wie srcset ein Hinweis für Browser ist, welche Bilder zum Download verfügbar sind, und dem Browser erlaubt, das beste für die Situation auszuwählen. Dem Browser die aspect-ratio im Voraus mitzuteilen, ist ähnlich nützlich.

Ich habe von Jen Simmons über eine absolut fantastische Methode gehört, dies zu handhaben: Fügen Sie dem UA-Stylesheet ein Standard-Seitenverhältnis hinzu, basierend auf den vorhandenen width- und height-Attributen der Elemente. So:

img, video {
  aspect-ratio: attr(width) / attr(height);
}

Lassen Sie das auf sich wirken.

Wenn Sie bereits haben:

<img src="image.jpg" width="800" height="600" />

Es hat automatisch das richtige Seitenverhältnis, wenn die Seite geladen wird. Das ist großartig.

1. Es ist leicht zu verstehen.
2. Ein Großteil des Internets hat diese Attribute bereits auf seinen Bildern.
3. Neue Entwickler werden keine Probleme haben, dies zu verstehen, und alte Entwickler werden dankbar sein, dass hier wenig (wenn überhaupt) Arbeit zu tun ist.

Ich mag die Idee des CSS-Features. Aber ich mag die Idee, es in das UAUA-Stylesheet einzufügen, 100 Mal mehr. Das ist keine Kleinigkeit, die man in Betracht ziehen muss - und ich bin nicht qualifiziert, alle Auswirkungen zu verstehen -, aber es erscheint auf den ersten Blick als etwas sehr Großartiges.

Jen hat ein Ticket für Leute geöffnet, die ihre Gedanken äußern können und verlinkt auf das Bug-Ticket, wo Firefox dies testen wird, um zu sehen, wie es läuft.