Käyttöohje
- Koon muuttamiseksi syötä suhde (esimerkiksi 16 ja 9) tai valitse yleinen suhde ja kirjoita sitten leveys tai korkeus. Toinen puoli lasketaan automaattisesti.
- Kuvasuhteen selvittämiseksi syötä kuvan, näytön tai videon leveys ja korkeus.
- Tarkista esikatselu ja kopioi CSS-aspect-ratio-sääntö, jos tarvitset sitä verkkosivun asetteluun.
Näin se toimii
Suhteellinen koon muuttaminen käyttää kaavaa korkeus = leveys × suhteen korkeus ÷ suhteen leveys (ja päinvastoin). Pikselikoot ovat yleensä kokonaislukuja, joten tulos voidaan pyöristää; kun suhde ei jakaudu tasan, kuten 16:9 leveydellä 1000, pyöristetty korkeus (563) on lähes tarkka likiarvo eikä tarkka arvo.
Koko yksinkertaistetaan jakamalla molemmat puolet niiden suurimmalla yhteisellä tekijällä: 1920 ja 1080 jakavat luvun 120, jolloin saadaan 16:9. Jotkin todelliset koot eivät sievene tuttuun suhteeseen. 1366×768 on tarkalleen 683:384, mikä on hyvin lähellä suhdetta 16:9, joten työkalu näyttää myös lähimmän yleisen suhteen, kun se on 2 %:n sisällä. Samoin ”21:9”-näytöt ovat todellisuudessa 64:27 (2560×1080) tai 43:18 (3440×1440); 21:9 on markkinointinimi.
CSS:ssä aspect-ratio: 16 / 9 saa elementin säilyttämään muotonsa leveyden muuttuessa, mikä on hyödyllistä video-upotuksille ja kuvapaikanvaraajille, joiden ei pitäisi siirtää asettelua latauksen aikana.
Esimerkit
Videon pikkukuvan koko
16:9-pikkukuva, jonka leveys on 1280 pikseliä, tarvitsee korkeudeksi 720 pikseliä.
Näytön kuvasuhteen tunnistaminen
2560×1600 yksinkertaistuu suhteeksi 8:5, joka on sama kuin 16:10, yleinen kannettavissa tietokoneissa.
Pystysuuntainen rajaus sosiaaliseen mediaan
Suhteella 4:5 ja leveydellä 1080 korkeus on 1350, pystysuuntainen koko, jonka monet syötteet hyväksyvät.
Usein kysytyt kysymykset
Onko 16:9 sama kuin 1,78:1?
Kyllä. 16 ÷ 9 ≈ 1,778, joten ne kuvaavat samaa muotoa. Elokuvamuodot ilmoitetaan usein desimaaleina, kuten 2,39:1.
Miksi tuloksessani on desimaaleja?
Kaikki leveydet eivät jakaudu tasan suhteella. Ota käyttöön pyöristys pikselikokoja varten; tulos on tällöin lähin kokonainen pikseli, joka voi poiketa tarkasta suhteesta pikselin murto-osan verran.
Toimiiko CSS:n aspect-ratio-ominaisuus kaikkialla?
Se on tuettu kaikissa nykyisissä pääselaimissa. Jos elementille on lisäksi määritetty sekä leveys että korkeus erikseen, ne ohittavat aspect-ratio-ominaisuuden.
Tietosuoja
Kaikki laskutoimitukset tapahtuvat selaimessasi. Mitään ei lähetetä tai tallenneta.