Bildförhållande Media-Element och intrinsicsize

0
15

Om du behöver ett bildförhållande storlek <div> (eller alla element som kan få barn), kan du göra det. Kanske är det renaste sättet är en custom-fastighet-och medelstora pseudo-element som skjuter rätt minsta höjd genom utfyllnad-baserad-på-bredd.

Men media element som för <img> har inte barn. <Video> – taggen inte är självstängande, men när det är som stöds (nästan alltid), innehållet av den ersättas med en skugga DOM som du inte har kontroll. Förutom att dessa är de enda två delar som “storlek till en extern resurs.” Så hur gör du för att verkställa bildförhållande på dem när man använder en variabel bredd som 100% eller 75vw? Tja, när de läsa, de kommer att ha sin naturliga proportioner, så det är nice. Men det betyder också att de inte vet höjden samtidigt som de fyller på och det kan orsaka prestanda jank-ening återflöde.

En lösning är att sätta dem i en behållare med ett bildförhållande, och tvingar dem att hörnen med absolut positionering. Men, alla med sig, att de är oförmögna av dimensionering till bildförhållande korrekt tills de lasten.

Därför intrinsicsize-attributet för “alla bildelement typer (inklusive SVG-bilder) och videos” som nu är under utveckling.

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

Den explainer dokumentet är användbart. Anledningen till att det är intrinsicsize och inte aspectratio beror på ett bildförhållande ger inte så mycket nyttig eller användbar information. Jag skulle älska att se det fungera på alla element och föras till CSS.