Wenn Sie ein Element mit Seitenverhältnis-Größe benötigen <div> (oder jedes Element, das Kinder haben kann), können Sie es tun. Der sauberste Weg ist vielleicht ein Pseudo-Element mit benutzerdefinierter Eigenschaftsgröße, das durch Padding-basiert-auf-Breite die korrekte Mindesthöhe durchsetzt.
Aber Medienelemente wie <img> haben keine Kinder. Das <video> Tag ist nicht selbstschließend, aber wenn es unterstützt wird (fast immer), wird der Inhalt durch einen Shadow DOM ersetzt, den Sie nicht kontrollieren. Außerdem sind dies die einzigen beiden Elemente, die "sich an eine externe Ressource anpassen". Wie erzwingen Sie also das Seitenverhältnis für sie, wenn Sie eine variable Breite wie 100% oder 75vw verwenden? Nun, sobald sie geladen sind, haben sie ihr natürliches Seitenverhältnis, das ist also gut. Es bedeutet aber auch, dass sie die Höhe während des Ladens nicht kennen und dies zu Leistungseinbußen durch Reflow führen kann.
Eine Lösung ist, sie in einen Container mit einem Seitenverhältnis zu setzen und sie durch absolute Positionierung in die Ecken zu zwingen. Aber für sich allein sind sie unfähig, sich korrekt an das Seitenverhältnis anzupassen, bis sie geladen sind.
Daher das intrinsicsize Attribut für "alle Bildelementtypen (einschließlich SVG-Bilder) und Videos", das jetzt in der Entwicklung ist.
<img intrinsicsize="400x300" style="width: 100%">Das Erklärungsdokument ist hilfreich. Der Grund, warum es intrinsicsize und nicht aspectratio ist, liegt daran, dass ein Seitenverhältnis keine so nützlichen oder nutzbaren Informationen liefert. Ich würde mir wünschen, dass es auf jedem Element funktionieren und auch nach CSS gebracht würde.
Das wäre sehr schön zu haben; es fühlt sich an, als ob es schon ewig existieren sollte. War allerdings ziemlich enttäuscht, als ich dem Link "jetzt in der Entwicklung" folgte und sah, dass es kein öffentliches Signal zur Umsetzung von Browserherstellern außer Chrome gibt. Gibt es heutzutage eine Plattform, auf der Entwickler über neue vorgeschlagene Webstandards abstimmen können, so wie es bei IE der Fall war?
Die Unterstützung ist bereits ziemlich gut, obwohl angemerkt werden sollte, dass diese Funktion sich im "Working Draft" befindet und sich ändern könnte, bevor sie Teil des Living Standards wird. D.h. am besten nicht in der Produktion verwenden, bis sie als Candidate Recommended gilt.
Ort zur Überprüfung der Feature-Implementierung. Hinweis: Dies wird von der Community aktualisiert, ist aber ziemlich genau.
https://caniuse.com/#search=intrinsic
Das ist großartig... kann es absolut kaum erwarten, dass dies von den großen Browsern übernommen wird.
Danke fürs Teilen...
Ich bin mir ziemlich sicher, dass wir über zwei verschiedene Dinge sprechen, oder? Ihr caniuse-Link handelt von CSS-Eigenschaften und dieser Beitrag + der Link, auf den ich mich bezogen habe (https://www.chromestatus.com/feature/4704436815396864) handeln von einem HTML-Attribut.
Entschuldigung. Wir sprechen über zwei verschiedene Dinge.
Ich habe ein Polyfill erstellt
https://github.com/nuxodin/intrinsicsize-polyfill