Kalkylator för bildförhållande

Så använder du kalkylatorn för bildförhållande

1. Välj ett av de Vanliga förhållanden (16:9, 4:3, 21:9, 1:1, 9:16, 3:2, 16:10, 4:5) eller skriv egna värden under Förhållande eller originalstorlek. Du kan ange ett förhållande (16 och 9) eller de verkliga måtten på en bild, en video eller en skärm (1920 och 1080).
2. Läs av resultaten: Förenklat förhållande, Förhållande som decimaltal (bredden delad med höjden), Orientering och Närmaste standard. Tecknet ”≈” betyder att din storlek ligger nära standardformatet men inte exakt på det.
3. Under Ny storlek (behåller förhållandet) skriver du en Ny bredd för att få den matchande höjden, eller en Ny höjd för att få bredden. Raden under visar uträkningen. Avmarkera Avrunda till hela pixlar om du behöver det exakta värdet, till exempel för utskriftsmått i millimeter.
4. Byt plats på bredd och höjd gör om ett liggande förhållande till stående (16:9 blir 9:16) och tillbaka.
5. Förhandsvisning ritar en ruta med ditt förhållande, och tabellen visar storleken för alla vanliga förhållanden vid din nya bredd.
6. Kopiera CSS-kod med Kopiera.

Så fungerar beräkningen

Ett bildförhållande är bredden delad med höjden, skrivet som två heltal. För att förenkla det delar verktyget båda sidorna med deras största gemensamma delare (SGD): SGD för 1920 och 1080 är 120, alltså är 1920:1080 = 16:9. Decimaltal multipliceras först med en tiopotens (2,39:1 blir 239:100).

Att ändra storlek med samma proportioner är en vanlig reguladetri:

• ny höjd = ny bredd × originalhöjd ÷ originalbredd
• ny bredd = ny höjd × originalbredd ÷ originalhöjd

Exempel: en 16:9-video som är 1280 px bred blir 1280 × 9 ÷ 16 = 720 px hög.

Vissa skärmar har ”udda” förhållanden. En bärbar dator med 1366 × 768 förenklas till 683:384, vilket är 1,779:1 – ett hårstrå från 16:9 (1,778:1), därav ”≈ 16:9”. Skärmar som säljs som 21:9 är egentligen 64:27 (2560 × 1080) eller 43:18 (3440 × 1440), och därför finns båda med i tabellen.

CSS-egenskapen aspect-ratio

aspect-ratio: 16 / 9; låter webbläsaren räkna ut den saknade dimensionen: med width: 100% följer höjden automatiskt med, och rutan skalas med sin behållare. Egenskapen fungerar i alla aktuella webbläsare (sedan 2021) och passar perfekt för inbäddade videor, kort, platshållare för bilder och miniatyrer. Kombinera den med object-fit: cover på bilder för att beskära i stället för att sträcka ut.

Koden innehåller även den äldre padding-top-tekniken som reserv: en procentuell padding räknas från bredden, så padding-top: 56.25% (9 ÷ 16) reserverar en yta i 16:9, och innehållet placeras absolut inuti den. Du behöver den bara för mycket gamla webbläsare.

Att reservera ytan med ett förhållande förhindrar också att layouten hoppar medan bilder och videor laddas, vilket förbättrar värdet för Cumulative Layout Shift (CLS).