Aspect Ratio medieelementer og intrinsicsize

0
21

Hvis du trenger et aspekt-forhold størrelse <div> (eller hvilken som helst element som kan få barn), kan du gjøre det. Kanskje den beste måten er en custom-holderen størrelse pseudo-element som presser riktig minimum høyde gjennom padding-basert-på-bredde.

Men media elementer som <img> ikke har barn. <Video> – koden ikke er selvlukkende, men når det er støttet (nesten alltid), og innholdet i den er erstattet med en skygge DOM du ikke har kontroll. I tillegg til disse to er de eneste elementene som “størrelse til en ekstern ressurs.” Så, hvordan kan du håndheve størrelsesforhold på dem når du bruker en variabel bredde som 100% eller 75vw? Vel, når de lastes, de vil ha sin naturlige aspekt ratio, så det er fint. Men det betyr også at de ikke vet høyden mens de er lasting og det kan føre til ytelse jank-ening flyt.

En løsning er å sette dem inn i en container med et sideforhold, og tvinger dem til å hjørnene med absolutt posisjonering. Men, helt av seg selv, de er ute av stand til dimensjonering til sideforholdet på riktig måte før de lastes inn.

Derfor, intrinsicsize attributtet for “alle bilde-element-typer (inkludert SVG-bilder, og videoer” som nå er under utvikling.

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

Den explainer dokumentet er nyttig. Grunnen til det er intrinsicsize og ikke aspectratio er fordi et sideforhold ikke gir så mye nyttig eller nyttig informasjon. Jeg elsker å se det fungere på hvilken som helst element og bli brakt til CSS så godt.