Aspekt-Verhältnis-Media-Elemente und intrinsicsize

0
18

Wenn Sie brauchen, ein Aspekt-Verhältnis Größe <div> – Element (oder Elemente, die Kinder haben), können Sie es tun. Vielleicht der sauberste Weg ist eine benutzerdefinierte-Eigenschaft-Größe-pseudo-element, drückt die richtige Mindesthöhe durch Polsterung-basiert-auf-Breite.

Aber-media-Elemente wie <img> – keine Kinder haben. Der <video> – tag nicht selbst schließen, aber wenn es unterstützt wird (fast immer), der Inhalt wird es ersetzt mit einem shadow DOM, die du nicht kontrollierst. Außerdem sind diese die einzigen zwei Elemente, die “Größe auf eine externe Ressource.” Also, wie Sie erzwingen, Seitenverhältnis auf, wenn Sie eine variable Breite wie 100% oder 75vw? Gut, wenn Sie einmal geladen sind, werden Sie Ihrem natürlichen Seitenverhältnis, so dass ist schön. Aber es bedeutet auch, dass Sie nicht wissen, die Höhe, während Sie geladen werden, und es kann zu performance-jank-eitig-reflow.

Eine Lösung ist, setzen Sie Sie in einen Behälter mit einem Aspekt-Verhältnis, sodass Sie die Ecken mit einer absoluten Positionierung. Aber, alle von sich, Sie sind unfähig, zu dimensionieren, um das Seitenverhältnis korrekt, bis Sie geladen werden.

Daher die intrinsicsize Attribut für “alle Bild-element-Typen (einschließlich SVG-Bilder und-videos”, die jetzt in der Entwicklung.

<img intrinsicsize=”400×300″ style=”width: 100%”>

Die Erklärer Dokument ist hilfreich. Der Grund, es ist intrinsicsize und nicht aspectratio ist da ein Aspekt-Verhältnis nicht so viel nützliche oder verwertbare Informationen. Ich würde gerne sehen, es funktioniert auf jedem element und CSS sowie.