Aspect Ratio - laskin - ylläpitää suhteita

Mikä on näkymäsuhde?

An kuvasuhdeon leveyden ja korkeuden suhteellinen suhde, joka ilmaistaan kahdella numeroilla, jotka erotetaan kaksoispisteellä (W: H). Se määrittelee suorakaiteen muodon - onko se leveä, pitkä tai neliö - määrittelemättä mitään todellisia mittoja. Aspektti suhteet ovat perustavaa valokuvauksessa, videossa, graafisessa suunnittelussa, web-kehityksessä ja näytön valmistuksessa.

Tämä laskin pienentää minkä tahansa leveys x korkeusparin yksinkertaisimpaan suhteeseen käyttäen Suurin yhteinen jaoja (GCD) -algoritmia. Se laskee myös oikean uuden korkeuden, kun haluat skaalata eri leveydelle, varmistaen, että kuvia ja videoita ei koskaan näytetä venytettyinä tai vääristyneinä.

Esimerkiksi 1920 x 1080 ja 3840 x 2160 -muotoilla on sama 16:9 -muotoilusuhde - ne eroavat toisistaan vain resoluutiossa. Tämän eron ymmärtäminen on kriittistä kaikille, jotka työskentelevät digitaalisen median kanssa, koska muotoilusuhteen ylläpitäminen muokkauksen aikana estää visuaalisen vääristymisen, joka tunnetaan nimellä "squishing" tai "stretching".

Aspektitasot esiintyvät kaikkialla jokapäiväisessä elämässä: älypuhelimen näytöllä, kannettavan tietokoneen näytöllä, sosiaalisessa mediassa julkaistuissa valokuvissa, videoissa, joita lähetät, ja jopa paperikokoissa, joihin painat. Esimerkiksi A4-paperin standardi käyttää √2: 1: n suhdetta (noin 1,414: 1), joka mahdollistaa arkkien taittamisen puoliksi säilyttäen samat suhteet.

Yleiset ulottuvuussuhteet ja niiden käyttö

Seuraavassa taulukossa esitetään yleisimmin käytetyt suhteet ja niiden tyypilliset sovellukset, jotta voit nopeasti tunnistaa, mikä niistä sopii projektisi.

Elokuvateollisuus käyttää useita erikoistuneita ulottuvuussuhteita standardin TV-muotojen ulkopuolella. Akatemian suhde (1.375:1) hallitsi varhaista elokuvaa, kun taas nykyaikaiset blockbusterit käyttävät tyypillisesti joko 1.85: 1:ää (laatua laajakuvaa) tai 2.39: 1:ää (anamorfista laajuutta). IMAX käyttää 1.43: 1:ää, joka on paljon korkeampi kuin standardin laajakuva - siksi IMAX-kohtaukset tuntuvat uppoavilta.

Kuinka muuttaa kokoa säilyttäen näkösuuntaa

Kuvan tai videokehyksen koon muuttaminen säilyttäen samalla sen kulmakivun vaatii yhden ulottuvuuden vahvistamisen ja toisen ulottuvuuden laskennan suhteellisesti.

• Tiedossa oleva uusi leveys, ratkaista korkeus:Uusi korkeus = (alkuperäinen korkeus x uusi leveys) ÷ alkuperäinen leveys
• Tiedossa oleva uusi korkeus, ratkaise leveys:Uusi leveys = (alkuperäinen leveys x uusi korkeus) ÷ alkuperäinen korkeus

Esimerkki 1:Muutetaan 1920 x 1080 - kuvan koko 1280 pikseliksi:
Uusi korkeus = (1080 x 1280) ÷ 1920 =7 - 20 vuottaTulos: 1280 x 720 (vieläkin 16: 9).

Esimerkki 2:Muokkaa 4000 x 3000 valokuvan (4:3) kokoa niin, että se sopii 1200-pikselin leveään sarakkeeseen:
Uusi korkeus = (3000 x 1200) ÷ 4000 =900 euroaTulos: 1200 x 900 (vieläkin 4:3).

Esimerkki 3:Tarvitset bannerin, jonka pituus on 600 pikseliä ja jonka lähdekoodi on 2560 x 1440:
Uusi leveys = (2560 x 600) ÷ 1440 =SähköinenTulos: 1067 x 600 (vielä 16:9).

Useimmat kuvanmuokkausohjelmistot (Photoshop, GIMP, Figma, Canva) sisältävät "lock aspect ratio" - tai "constrain proportions" -vaihtoehdon. Kun se on aktivoitu, yhden ulottuvuuden muuttaminen säätää automaattisesti toisen. Jos kuitenkin haluat laskea ulottuvuudet ennen editoinnin avaamista - tai työskentelet CSS: n, reagoivan kuvan tai videon koodausasetusten kanssa - tämä laskin antaa sinulle tarkat arvot välittömästi.

Web-suunnittelun ja CSS: n näkökulmasuhteet

Nykyaikainen verkkokehitys perustuu voimakkaasti näkökohtien suhteisiin reagoivia ulkoasuja varten.aspect-ratioproperty (tuetaan kaikissa nykyaikaisissa selaimissa vuodesta 2021 lähtien) avulla voit määrittää laatikon suhteet suoraan:

.video-container { aspect-ratio: 16 / 9; width: 100%; }

Tämä luo reagoivan säiliön, joka ylläpitää aina 16: 9: n suhdetta näkökentän leveydestä riippumatta.

• Sisällytetyt videot:YouTube- ja Vimeo-sisällytykset tarvitsevat 16: 9: n säiliöt, jotta vältetään kirjelaatikko tai leikkaus.
• Kuvan sijaintimerkinnät:Kuvan asteikon asettaminen ennen kuvan lataamista estää Cumulative Layout Shift (CLS), joka on keskeinen Core Web Vitals -mittaus.
• Korttien asettelut:Tuotekaartit ja pikkukukuvat näyttävät yhtenäisiltä, kun niillä on sama kuvasuhde ruudulla.
• Sankarikohtaukset:Täyslaajat bannerit käyttävät usein 3:1 tai 4:1 -muotoja, jotta visuaalinen tasapaino säilyy eri näytön kokoissa.

HTML-tiedosto<img>elementti tukee myöswidthjaheightNäiden ominaisuuksien avulla se voi varata oikean tilan jo ennen kuva tiedoston saapumista.

Sosiaalisen median näkökulman suhteet

Jokaisella sosiaalisen median alustalla on suositeltu eri sisällötyypille sopivia kuvaprosentteja. Väärän suhteen käyttäminen tarkoittaa, että sisältösi leikataan, kirjallistetaan tai menettää laatua.

Maksimaalisen sitoutumisen varmistamiseksi luo aina sisältöä alustalla suositellulla suhteella ja resoluutiolla. Korkeamman resoluution tiedostojen lataaminen (esim. 4K YouTubeen) antaa alustalle mahdollisuuden tarjota parhaan laadun katsojille suurilla näytöillä ja vähentää automaattisesti mobiilikäyttäjiä varten.

Aspektisuhteen laskennan matematiikka

Yksinkertaistetun kuvasuhteen laskeminen edellyttääSuurin yhteinen jaktaja (GCD)GCD lasketaan euklidisen algoritmin avulla, joka on yksi matematiikan vanhimmista algoritmeista.

Vaiheittainen esimerkki 1920 x 1080:

• GCD ((1920, 1080): 1920 mod 1080 = 840
• GCD ((1080, 840)): 1080 mod 840 = 240
• GCD ((840, 240)): 840 mod 240 = 120
• GCD ((240, 120)): 240 mod 120 = 0 -> GCD = 120

Jaetaan: 1920 ÷ 120 = 16, 1080 ÷ 120 = 9 -> Suhde =16:9:ssä

Käytännössä tämä resoluutio on noin 16:9 (täsmällinen 16:9 siinä leveydessä olisi 1366 x 768.375). Valmistajat pyöristävät kokonaisia pikseleitä, minkä vuoksi joillakin "16:9" -näyttöillä on hieman epätäydelliset suhteet.

Seuraavadesimaaliprosentti16:9 = 1,778, 4:3 = 1,333, 21:9 = 2,333. Korkeampi desimaali tarkoittaa laajempaa suorakulmaa.

Aspekttiosuus valokuvissa ja painoksissa

Valokuvan kulma-aspektit vaikuttavat kokoonpanoon, kehystykseen ja siihen, miten kuvat tulostetaan tai näytetään.

Kun tulostetaan valokuvia, kuvanmuotojen epäsuhde aiheuttaa leikkauksen. 3:2-kuva, joka on tulostettu 8x10" (joka on 5:4) menettää osan kuvasta. Ammattimaiset valokuvaajat suunnittelevat koostumuksensa lopullisen tulosnopeuden huomioon ottamalla, tai he kuvaavat laajemmin ja leikkaavat jälkituotannossa kohdeformaatin mukaiseksi.

Kansainvälisessä paperistandardissa (ISO 216) käytetään ainutlaatuista √2:1 -suhdetta (noin 1,414:1). Tämä tarkoittaa sitä, että A4-lehteen taittaminen puoliksi tuottaa A5-lehteen, jolla on samat suhteet - matemaattisesti tyylikäs ominaisuus, jota mikään muu suhde ei omaa. Kun suunnittelet tulostusta, varmista aina, että digitaalinen kankaasi vastaa kohdepaperin näkösuuntaa ennen aloittamista - sen muuttaminen myöhemmin merkitsee koko kokoonpanon uudelleen.

Ammattimaiset kuvaajat, jotka kuvaavat tapahtumia tai muotokuvia, käyttävät usein 3:2-kameran, mutta toimittavat lopulliset kuvat useissa suhteissa erilaisten tulosten mukaiseksi: 3:2 4x6-tulostuksille, 5:4 8x10-tulostuksille, 16:9 diaesittelyille ja 1:1 sosiaalisen median profiilikuville. Useiden tulosten suunnittelu alusta alkaen - jättämällä ylimääräistä tilaa kohteen ympärille - kutsutaan "ammunnan irti" ja se on paras käytäntö kaupallisessa valokuvauksessa.