Sådan bruger du det
- For at ændre størrelse skal du angive forholdet (f.eks. 16 og 9) eller vælge et almindeligt forhold og derefter indtaste en bredde eller en højde. Den anden side beregnes.
- For at finde et formatforhold skal du indtaste bredden og højden på et billede, en skærm eller en video.
- Tjek forhåndsvisningen, og kopier CSS aspect-ratio-reglen, hvis du skal bruge den til et weblayout.
Sådan fungerer det
Proportionel skalering bruger højde = bredde × forholdets højde ÷ forholdets bredde (og omvendt). Pixelstørrelser er normalt hele tal, så resultatet kan afrundes; når et forhold ikke går lige op, f.eks. 16:9 ved en bredde på 1000, er den afrundede højde (563) en tæt tilnærmelse snarere end et eksakt match.
Et størrelsesforhold forkortes ved at dividere begge sider med deres største fælles divisor: 1920 og 1080 har 120 til fælles og giver 16:9. Nogle faktiske størrelser kan ikke forkortes til et velkendt forhold. 1366×768 er nøjagtigt 683:384, hvilket er meget tæt på 16:9, så værktøjet viser også det nærmeste almindelige forhold, når det ligger inden for 2 %. På samme måde er “21:9”-skærme i virkeligheden 64:27 (2560×1080) eller 43:18 (3440×1440); 21:9 er et markedsføringsnavn.
I CSS får aspect-ratio: 16 / 9 et element til at bevare den form, når bredden ændrer sig, hvilket er nyttigt til videoindlejringer og billedpladsholdere, der ikke må forskyde layoutet under indlæsning.
Eksempler
Størrelse på videominiature
Et 16:9-miniaturebillede, der skal være 1280 pixel bredt, skal være 720 pixel højt.
Identificer en skærms billedformat
2560×1600 forkortes til 8:5, hvilket er det samme som 16:10 og er almindeligt på bærbare computere.
Portrætbeskæring til sociale medier
Med et 4:5-forhold og en bredde på 1080 er højden 1350, en portrætstørrelse, som mange feeds accepterer.
Ofte stillede spørgsmål
Er 16:9 det samme som 1,78:1?
Ja. 16 ÷ 9 ≈ 1,778, så de to beskriver samme form. Biografformater angives ofte som decimaltal, f.eks. 2,39:1.
Hvorfor har mit resultat decimaler?
Ikke alle bredder går lige op i forholdet. Slå afrunding til ved pixelstørrelser; resultatet er så den nærmeste hele pixel, hvilket kan afvige en brøkdel af en pixel fra det eksakte forhold.
Virker CSS-egenskaben aspect-ratio overalt?
Den understøttes i alle aktuelle større browsere. Hvis et element også har både bredde og højde angivet eksplicit, har de prioritet over aspect-ratio.
Privatliv
Alle beregninger kører i din browser. Intet bliver sendt eller gemt.