Utilia
Kategoriat ▾
Kieli: fi ▾

Kuvasuhdelaskin

Kuvasuhdelaskin supistaa leveyden ja korkeuden suhteeksi, muuttaa kokoa mittasuhteet säilyttäen ja antaa CSS aspect-ratio -koodin 16:9-, 4:3- ja 21:9-kokoihin.

Yleiset kuvasuhteet

Suhde tai alkuperäinen koko

Kirjoita suhde (16 ja 9) tai todelliset mitat (1920 ja 1080).

Uusi koko (suhde säilyy)

Kirjoita uusi leveys saadaksesi korkeuden tai uusi korkeus saadaksesi leveyden.

Supistettu suhde
–
Desimaalisuhde
–
Suunta
–
Lähin vakiomuoto
–

Esikatselu

Yleiset kuvasuhteet

SuhdeDesimaaliKokoTyypillinen käyttö

Näin käytät kuvasuhdelaskinta

  1. Valitse jokin Yleiset kuvasuhteet -kohdan suhteista (16:9, 4:3, 21:9, 1:1, 9:16, 3:2, 16:10, 4:5) tai kirjoita omat arvosi kenttään Suhde tai alkuperäinen koko. Voit antaa suhteen (16 ja 9) tai kuvan, videon tai näytön todelliset mitat (1920 ja 1080).
  2. Lue tulokset: Supistettu suhde, Desimaalisuhde (leveys jaettuna korkeudella), Suunta ja Lähin vakiomuoto. Merkki ”≈” tarkoittaa, että koko on lähellä mutta ei täsmälleen kyseistä vakiomuotoa.
  3. Kohdassa Uusi koko (suhde säilyy) kirjoitat Uusi leveys -kenttään leveyden ja saat vastaavan korkeuden tai Uusi korkeus -kenttään korkeuden ja saat leveyden. Alla oleva rivi näyttää laskutoimituksen. Poista valinta kohdasta Pyöristä kokonaisiin pikseleihin, jos tarvitset tarkan arvon, esimerkiksi millimetreinä annettuja tulostuskokoja varten.
  4. Vaihda leveys ja korkeus muuttaa vaakasuhteen pystysuhteeksi (16:9 muuttuu 9:16:ksi) ja takaisin.
  5. Esikatselu piirtää laatikon valitulla kuvasuhteella, ja taulukko näyttää jokaisen yleisen kuvasuhteen koon uudella leveydelläsi.
  6. Kopioi CSS-koodi painikkeella Kopioi.

Työkalu toimii selaimessasi. Mitään kirjoittamaasi ei lähetetä palvelimelle.

Näin laskenta toimii

Kuvasuhde on leveys jaettuna korkeudella, ilmaistuna kahtena kokonaislukuna. Supistaakseen sen työkalu jakaa molemmat luvut suurimmalla yhteisellä tekijällä (syt): lukujen 1920 ja 1080 syt on 120, joten 1920:1080 = 16:9. Desimaaliluvut kerrotaan ensin kymmenen potenssilla (2,39:1 muuttuu muotoon 239:100).

Koon muutos mittasuhteet säilyttäen on suoraan verrannollisuutta:

  • uusi korkeus = uusi leveys × alkuperäinen korkeus ÷ alkuperäinen leveys
  • uusi leveys = uusi korkeus × alkuperäinen leveys ÷ alkuperäinen korkeus

Esimerkki: 1280 px leveän 16:9-videon korkeus on 1280 × 9 ÷ 16 = 720 px.

Joillakin näytöillä on ”outoja” suhteita. Kannettava, jonka resoluutio on 1366 × 768, supistuu muotoon 683:384 eli 1,779:1, mikä on häviävän vähän pielessä 16:9:stä (1,778:1), joten tulokseksi tulee ”≈ 16:9”. 21:9-näytöiksi myydyt näytöt ovat todellisuudessa 64:27 (2560 × 1080) tai 43:18 (3440 × 1440), minkä vuoksi molemmat näkyvät taulukossa.

CSS:n aspect-ratio-ominaisuus

Määritys aspect-ratio: 16 / 9; kertoo selaimelle, että puuttuva mitta lasketaan itse: kun width: 100%, korkeus seuraa automaattisesti ja laatikko skaalautuu säiliönsä mukana. Ominaisuus toimii kaikissa nykyisissä selaimissa (vuodesta 2021) ja sopii erinomaisesti videoupotuksille, korteille, kuvien paikkamerkeille ja pikkukuville. Yhdistä se kuvissa arvoon object-fit: cover, jos haluat rajata kuvaa venyttämisen sijaan.

Koodi sisältää varalle myös vanhemman padding-top-tekniikan: prosenttimuotoinen täyte lasketaan leveydestä, joten padding-top: 56.25% (9 ÷ 16) varaa 16:9-alueen, ja sisältö sijoitetaan sen sisälle absoluuttisesti. Tarvitset sitä vain hyvin vanhoille selaimille.

Kun tila varataan kuvasuhteella, sivun sisältö ei myöskään hypi kuvien ja videoiden latautuessa. Se parantaa Cumulative Layout Shift (CLS) -mittarin arvoa.

Usein kysytyt kysymykset

Mikä on koon 1920 × 1080 kuvasuhde?

16:9. Samoin 1280 × 720, 2560 × 1440 ja 3840 × 2160 (4K UHD).

Mitä kuvasuhdetta käytän pystyvideoille?

9:16 storyille, Reelsille, TikTokille ja Shortsille (1080 × 1920). Syötteen julkaisuille Instagram suosii suhdetta 4:5 (1080 × 1350).

Onko 16:10 sama kuin 16:9?

Ei. Suhde 16:10 (1,6:1) on hieman korkeampi kuin 16:9 (1,78:1). Se on yleinen kannettavissa, esimerkiksi 1920 × 1200 tai 2560 × 1600.

Miksi muutetun koon korkeus ei ole kokonaisluku?

Koska valitsemasi leveys ei ole suhteen monikerta. Leveys 1000 px suhteessa 16:9 antaa korkeudeksi 562,5 px. Pyöristä kokonaisiin pikseleihin pyöristää sen arvoon 563. Kun valitset leveyden, joka on luvun 16 monikerta, pyöristystä ei tarvita lainkaan.

Muuttaako koon muutos kuvan laatua?

Tämä työkalu vain laskee mitat. Kuvan suurentaminen alkuperäisten pikselien yli tekee siitä pehmeämmän. Jos haluat muuttaa varsinaisen tiedoston kokoa, käytä kuvan koonmuutostyökalua ja syötä siihen nämä luvut.

Aiheeseen liittyvät työkalut