Så här använder du det
- För att ändra storlek, ange förhållandet (till exempel 16 och 9) eller välj ett vanligt, skriv sedan in en bredd eller en höjd. Den andra sidan beräknas.
- För att hitta ett bildförhållande anger du bredd och höjd för en bild, skärm eller video.
- Kontrollera förhandsvisningen och kopiera CSS-regeln aspect-ratio om du behöver den för en webblayout.
Så fungerar det
Proportionell skalning använder höjd = bredd × förhållandets höjd ÷ förhållandets bredd (och tvärtom). Pixelstorlekar är vanligtvis heltal, så resultatet kan avrundas; när ett förhållande inte går jämnt ut, till exempel 16:9 vid en bredd på 1000, är den avrundade höjden (563) en nära approximation snarare än en exakt träff.
En storlek förenklas genom att dividera båda sidorna med deras största gemensamma delare: 1920 och 1080 har 120 gemensamt, vilket ger 16:9. Vissa verkliga storlekar kan inte reduceras till ett bekant förhållande. 1366×768 är exakt 683:384, vilket är mycket nära 16:9, så verktyget visar även det närmaste vanliga förhållandet när det ligger inom 2 %. På samma sätt är “21:9”-skärmar egentligen 64:27 (2560×1080) eller 43:18 (3440×1440); 21:9 är ett marknadsföringsnamn.
I CSS gör aspect-ratio: 16 / 9 att ett element behåller den formen när dess bredd ändras, vilket är användbart för videoinbäddningar och bildplatshållare som inte ska flytta layouten under laddning.
Exempel
Storlek på videominiatyr
En 16:9-miniatyr som måste vara 1280 pixlar bred behöver vara 720 pixlar hög.
Identifiera en skärms förhållande
2560×1600 förenklas till 8:5, vilket är detsamma som 16:10, vanligt på bärbara datorer.
Porträttbeskärning för sociala medier
Med ett 4:5-förhållande och en bredd på 1080 blir höjden 1350, en porträttstorlek som många flöden accepterar.
Vanliga frågor
Är 16:9 detsamma som 1,78:1?
Ja. 16 ÷ 9 ≈ 1,778, så de två beskriver samma form. Bioformat anges ofta som decimaltal, till exempel 2,39:1.
Varför har mitt resultat decimaler?
Inte varje bredd går jämnt ut med förhållandet. Slå på avrundning för pixelstorlekar; resultatet blir då närmaste hela pixel, vilket kan vara en bråkdel av en pixel från det exakta förhållandet.
Fungerar CSS-egenskapen aspect-ratio överallt?
Det stöds i alla aktuella större webbläsare. Om ett element även har både bredd och höjd uttryckligen angivna, tar de prioritet över aspect-ratio.
Integritet
Alla beräkningar sker i din webbläsare. Inget skickas eller sparas.