Ik heb ooit een WordPress-thema verzonden waarbij elke aanbevolen afbeelding op mobiel eruitzag alsof hij door een mangel was gegaan. Gezichten uitgerekt, logo's verpletterd. De oorzaak was drie tekens in een CSS-bestand: a height: 240px naast een zitten width: 100%. Op een 375-pixel telefoon die een verhouding van ruwweg 1,56:1 produceerde, en de beelden waren 16:9 - 1,78:1 Geen enorm verschil op papier Zeer duidelijk op een menselijk gezicht.
Aspect ratio is een van die dingen die te eenvoudig aanvoelen om fout te doen, dus niemand controleert het dubbel. Het is een enkele divisie. En toch ruïneert het stilletjes de video-export, opengraph-voorbeelden die op de verkeerde plaats worden bijgesneden, thumbnails met zwarte balken en heldenafbeeldingen die er goed uitzien op je 27-inch monitor en verschrikkelijk op een telefoon. De wiskunde is triviaal; de kosten van een afrondingsfout zijn dat niet.
ik bouw Toolz.dev en ik doe deze berekening constant - sizing images for a plugin' s admin screens, exporting Reels-format video, work out what an OpenGraph image eigenlijk zou moeten zijn Dus heb ik de Aspect ratio rekenmachine om het in één veld te doen en te laten zien dat het werkt. Geef het een verhouding en de ene dimensie, het geeft je de andere. Geef het een maat, het vermindert het tot de verhouding en vertelt je hoe die verhouding wordt genoemd.
tl;dr: De beeldverhouding is breedte gedeeld door hoogte, geschreven als twee getallen met een dubbele punt. Om een ontbrekende hoogte te vinden:
width × (ratioHeight ÷ ratioWidth). Om een ontbrekende breedte te vinden:height × (ratioWidth ÷ ratioHeight). Om de verhouding uit een grootte te halen, deel je beide getallen door hun grootste gemene deler - 1920 en 1080 delen een GCD van 120, wat 16:9 oplevert. De Aspect ratio rekenmachine Doet ze alle drie in uw browser, met voorinstellingen voor 16:9, 9:16, 1:1, 4:3, 3:2, 21:9, 1,91:1 en 2,39:1.
Wat is een beeldverhouding?
Een beeldverhouding is de proportionele relatie tussen een afbeelding' s breedte en de hoogte ervan Het wordt geschreven als twee getallen gescheiden door een dubbele punt - 16:9, 4:3, 1:1 - en wat het beschrijft is maken, niet maat.
Dat onderscheid is het hele spel. 1280 × 720, 1920 × 1080, en 3840 × 2160 zijn drie verschillende resoluties met één beeldverhouding Ze hebben dezelfde vorm bij drie maten, daarom schaalt elk van hen in een andere zonder vervorming of bijsnijden Ondertussen hebben 1920 × 1080 en 1920 × 1200 bijna dezelfde breedte, verschillen met 120 pixels hoogte, en zijn fundamenteel verschillende vormen - de ene is 16:9, de andere is 16:10, en inhoud ontworpen voor de ene in een container of andere letter voor de andere te zetten in een container gebouwd.
De verhouding is slechts breedte ÷ hoogte uitgedrukt als een fractie in de laagste termen. 1920 ÷ 1080 = 1.777…, en de fractie 1920/1080 reduceert tot 16/9. Beide zijn hetzelfde feit dat op twee manieren wordt vermeld: de decimale vorm is gemakkelijker te vergelijken (is 1,78 breder dan 1,5? duidelijk), en de colonvorm is gemakkelijker te zeggen.
De drie berekeningen die je eigenlijk nodig hebt
Oplossen voor een ontbrekende dimensie
U kent de vorm en één zijde Dit is in de praktijk het meest voorkomende geval: " Ik heb een 16:9 afbeelding nodig en mijn container is 1280 pixels breed - hoe hoog?"
height = width × (ratioHeight ÷ ratioWidth)
= 1280 × (9 ÷ 16)
= 720
En in de andere richting:
width = height × (ratioWidth ÷ ratioHeight)
= 1080 × (16 ÷ 9)
= 1920
Kies in de rekenmachine een voorinstelling of typ uw verhouding, vul de dimensie in die u kent, laat de andere leeg en druk op Berekenen. Het vult het lege veld in en toont de rekenkunde eronder.
Een maat verkleinen tot zijn verhouding
Je hebt een maat en wilt de vorm ervan weten - meestal om te controleren of twee activa overeenkomen, of om uit te zoeken wat een client' is mysterie-gedimensioneerde export eigenlijk is.
De methode is de grootste gemeenschappelijke deler. Zoek het grootste getal dat beide dimensies gelijkmatig verdeelt en deel er beide door. Voor 1920 en 1080 is dat getal 120: 1920 ÷ 120 = 16, 1080 ÷ 120 = 9. verhouding 16:9.
Dit is waar de antwoorden interessant worden, omdat maten in de echte wereld dat vaak doen nee reduceer tot een marketingvriendelijke verhouding Een 3440 × 1440 ultrabrede monitor reduceert tot 43:18 Een 2560 × 1080 reduceert men tot 64:27 Beide worden verkocht als "21:9", en geen van beide is eigenlijk - 21:9 zou 3360 × 1440 zijn Het label is een afronding van het decimaal (≈2,39:1 en ≈2,37:1) tot iets dat netjes klinkt naast 16:9 De rekenmachine geeft je de echte gereduceerde verhouding en de decimaal, dus je kunt van de werkelijkheid een vel.
Schaal en passend
Twee varianten van hetzelfde idee. schaading vermenigvuldigt beide dimensies met dezelfde factor, waardoor per definitie de verhouding behouden blijft - een schaal van 50% van 1920 × 1080 is 960 × 540, nog steeds 16:9. betamelijk Verkleint een brongrootte totdat deze in een begrenzingsvak zit zonder vervorming: neem de kleinere van boxWidth ÷ sourceWidth en boxHeight ÷ sourceHeight en daarop schalen. Een 4000 × 3000 foto die in een 1200 × 1200-doos wordt geplaatst, wordt 1200 × 900. dit is precies wat CSS object-fit: contain doet, en precies wat een afbeelding CDN doet als u om een MAX-DIMMENSION-wijzigingsgrootte vraagt.
Belangrijkste kenmerken van de Aspect Ratio-rekenmachine
Tien presets, gelabeld met waar ze daadwerkelijk worden gebruikt
16:9 voor standaard video en de meeste schermen. 9:16 voor rollen, korte broeken, TikTok en verhalen. 1:1 voor vierkante sociale berichten en avatars. 4:3 voor oudere schermen en iPad. 3:2 voor DSLR-fotografie en 35 mm-film. 2:3 voor portretafdrukken. 5:4 voor 8×10 afdrukken. 21:9 voor ultrabreed. Voor beelden van OpenGraph-link-preview. voor anamorf breedbeeld. Door een preset te zweven, vertelt u waar het voor is, wat belangrijker is dan het aantal wanneer u probeert te onthouden welke Instagram wil.
de formule onder elk antwoord
Het resultaatpaneel toont de exacte rekenkunde - 1280 × (9 ÷ 16) = 720. Deels zodat je het kunt verifiëren, deels zodat je het in een spreadsheet of een script kunt tillen. Als u een dimensie hard gaat coderen in een CSS-bestand of een Tailwind-configuratie, zou u moeten kunnen zien waar het nummer vandaan komt.
De verminderde verhouding, de decimaal en de naam
Elk resultaat rapporteert alle drie de representaties: de verminderde integer-verhouding (16:9), de decimale vorm (1,778:1) en een algemene naam als deze er een heeft. Decimaal is waar je mee vergelijkt; de naam is wat je typt in een ontwerpopdracht.
Megapixels en totaal aantal pixels
Elk resultaat omvat het aantal pixels in megapixels Dit is het getal dat het geheugengebruik en de bestandsgrootte daadwerkelijk voorspelt wanneer u de grootte van afbeeldingen aanpast - een foto van 4000 × 3000 is 12 MP, en de verdubbeling van de afmetingen verviervoudigt dat tot 48 MP, niet verdubbelt. Als u responsieve beeldsets genereert, is die kwadratische relatie het ding dat u in uw hoofd moet houden. Als u klaar bent met dimensioneren, moet u Afbeelding wijzigen en Afbeelding samendrukken Doe het eigenlijke werk, in de browser.
Een live vormvoorbeeld
Een rechthoek in het resultaatpaneel, getekend op de verhouding die je zojuist hebt berekend. Het klinkt decoratief en dat is het niet. De snelste manier om te vangen die je 9:16 hebt getypt toen je 16:9 bedoelde, is door naar een hoge doos te kijken terwijl je een brede had verwacht.
Client-side, offline, geen aanmelding
Gewone JavaScript-berekening in uw browser. Er wordt niets naartoe verzonden, niets wordt gelogd en de pagina blijft werken met het netwerk uit.
Welke beeldverhouding moet ik gebruiken?
| verhouding | tientallig | waar het wordt gebruikt | Typische pixelgrootte |
|---|---|---|---|
| 16:9 | 1.778 | YouTube, HD/4K-video, de meeste monitoren, tv's | 1920 × 1080, 3840 × 2160 |
| 9:16 | 0.563 | Instagram-rollen, TikTok, YouTube-shorts, verhalen | 1080 × 1920 |
| 1:1 | 1.0 | Instagram-feedberichten, avatars, productminiaturen | 1080 × 1080 |
| 4:5 | 0,8 | Instagram portretfeed bericht (grootste feed footprint) | 1080 × 1350 |
| 1.91:1 | 1.91 | OpenGraph / Twitter-kaartlinkvoorbeelden | 1200 × 630 |
| 4:3 | 1.333 | iPad, oudere monitoren, veel camerasensoren | 2048 × 1536 |
| 3:2 | 1,5 | DSLR en spiegelloze foto's, 35mm film, fotoafdrukken | 6000 × 4000 |
| 21:9 (Echt ~2,37-2,39:1) | ~2.38 | Ultrabrede monitoren, filmische gewassen | 3440 × 1440 |
| 2.39:1 | 2.39 | Anamorfe breedbeeld cinema | 4096 × 1716 |
Twee praktische notities De 1200 × 630 OpenGraph grootte vermindert tot 40:21, een decimaal van 1.905 - dicht genoeg bij 1.91:1 dat iedereen het zo noemt, en het is de grootte Facebook, LinkedIn, en X allemaal netjes renderen Controleer het resultaat met de Grafiekvoorbeeld openen Tool voordat je het verzendt, want een slecht bijgesneden voorbeeldafbeelding is de meest zichtbare bug op een link die niemand klikt. En 4:5 is het waard om te weten voor Instagram specifiek: het neemt meer verticale ruimte in het voer in dan 1:1, wat vrije aandacht is.
Veelvoorkomende gebruiksgevallen
dimensionering responsieve afbeeldingen zonder vervorming
Je bouwt een kaartraster en het ontwerp vraagt 16:9 miniaturen bij een containerbreedte van 384 pixels. Bereken: 384 × 9 ÷ 16 = 216. Nu heb je een betonnen maat voor zowel je CSS aspect-ratio: 16 / 9 aangifte en je afbeelding exporteren, en ze zijn het met elkaar eens Moderne CSS maakt dit makkelijker dan vroeger - aspect-ratio in CSS neemt de verhouding direct en laat de browser de rekenkunde doen - maar je hebt nog steeds de pixelafmetingen nodig voor het actief zelf.
Video exporteren voor een specifiek platform
Je schoot 16:9 en hebt een verticale snede van 9:16 nodig De hoogte blijft op 1920, dus de breedte is 1920 × 9 ÷ 16 = 1080 Dat is je exportgrootte - en de reden dat de cijfers bekend voorkomen is dat 1080 × 1920 gewoon 1920 × 1080 is met de verwisselde assen, wat " vertical video" betekent.
Een ding dat de rekenmachine niet voor u zal doen: H.264 vereist even afmetingen. Als je wiskunde op een oneven getal terechtkomt, rond de oneven kant naar beneden met één pixel af, anders weiger je de baan.
Uitzoeken wat een mysterieuze troef eigenlijk is
Een cliënt stuurt activa op 1440 × 1800 en vraagt waarom ze slecht bijsnijden op de homepage Verminder het: GCD van 1440 en 1800 is 360, wat 4:5 geeft Je homepage slots zijn 16:9. die twee vormen kunnen niet allebei tevreden zijn zonder bijsnijden - nu heb je een concreet antwoord en een beslissing om te nemen, in plaats van een vaag gevoel dat er iets niet in zit.
Controleren of een set activa consistent is
Voer voor een lancering de dimensies van elke heldafbeelding uit in de verhoudingsmodus. Als een van de dertig terugkomt als 1.6:1 terwijl de rest 1.778:1 is, heb je het bezit gevonden dat er subtiel verkeerd uitziet op de live site, en je hebt het gevonden voordat een gebruiker dat doet.
Technische opmerkingen die het waard zijn om te weten
afronding. De meeste ratio berekeningen komen niet op hele pixels terecht. 16:9 bij een breedte van 1000 geeft een hoogte van 562,5 De rekenmachine rondt af naar de dichtstbijzijnde hele pixel, dus je krijgt 563 - een vorm die 1,7762:1 is in plaats van 1,7778:1, een verschil van ongeveer een tiende van een procent, en onzichtbaar Achtervolg het niet Merk op dat consequent afronden neerschieten Over een afbeeldingsset kan een zichtbare drift worden opgewekt als u elementen stapelt; rond de brondimensie afsteken in plaats van uit het vorige resultaat.
Pixel-aspectverhouding versus weergave-beeldverhouding. In broadcast video kunnen deze verschillen: oude DV-beelden hebben 720 × 480 pixels opgeslagen maar weergegeven als 4:3 door elke pixel niet-vierkant te maken Bijna niets wat je vandaag aanraakt doet dit - alles is vierkante pixels - maar als je werkt met legacy-beelden en de wiskunde weigert op te tellen, is dit de reden.
aspect-ratio in CSS. Sinds 2021 kun je schrijven aspect-ratio: 16 / 9 En laat de browser de vorm vasthouden terwijl één dimensie vloeiend is. Gebruik het. Het verwijdert een hele klasse van de padding-top-percentage hacks die vroeger nodig waren, en het betekent dat je lay-out correct blijft bij breedtes die je nooit hebt getest. U wilt nog steeds de rekenmachine voor de activa-export, omdat het afbeeldingsbestand een reëel aantal pixels moet zijn.
Bijsnijden is geen schaling. Als een bron - en doelverhouding verschillen, kunt u de grootte tussen hen niet wijzigen - u moet bijsnijden, brievenbus of vervormen Kies opzettelijk. object-fit: cover crops (en is meestal wat je wilt voor foto's), contain brievenbussen (meestal wat u wilt voor logo's), en fill Vervormt (bijna nooit wat je wilt, en de oorzaak van mijn verminkte gezichtsbug bovenaan dit artikel).
FAQ
Hoe bereken ik de beeldverhouding van breedte en hoogte?
Verdeel beide getallen door hun grootste gemene deler. Voor 1920 × 1080 is de GCD 120, dus de verhouding vermindert tot 16:9. Schakel deze rekenmachine om de verhoudingsmodus te krijgen, voer beide dimensies in en het doet de reductie en geeft de verhouding voor u.
Welke hoogte heb ik nodig voor een 16:9-afbeelding bij 1280 pixels breed?
Vermenigvuldig de breedte met 9 en deel door 16: 1280 × 9 ÷ 16 = 720. Dus een 16:9 afbeelding 1280 pixels breed is 720 pixels hoog. Voer de 16:9-voorinstelling en een breedte van 1280 in om deze te bevestigen.
Wat is het verschil tussen beeldverhouding en resolutie?
Aspect ratio is de vorm - de verhouding van breedte tot hoogte Resolutie is het werkelijke aantal pixels. 1280 × 720 en 1920 × 1080 zijn verschillende resoluties met dezelfde beeldverhouding van 16:9, daarom schaalt de een naar de ander zonder vervorming of bijsnijden.
Welke beeldverhouding moet ik gebruiken voor sociale media?
Gebruik 1:1 of 4:5 voor Instagram-feedposts, 9:16 voor rollen, verhalen, TikTok en YouTube-shorts, 16:9 voor standaard YouTube-video en 1.91:1 voor grafiek openen link voorbeeldafbeeldingen op Facebook, LinkedIn en X. De voorinstellingen in deze tool bevatten al deze afbeeldingen.
Waarom ziet mijn afbeelding er uit op resized uit?
De nieuwe breedte en hoogte komen niet overeen met de oorspronkelijke verhouding, dus wordt de afbeelding langs één as platgedrukt Bereken de doelhoogte vanaf uw doelbreedte met behulp van de oorspronkelijke verhouding in plaats van beide getallen met de hand te typen - dat is precies waar de solve-for-missing-side modus voor is.
Wat betekent 21:9 eigenlijk?
Het is een marketinglabel voor ultrabrede displays. De echte verhouding van een 3440 × 1440-monitor is 43:18, ongeveer 2,39:1 en een 2560 × 1080-paneel is 64:27. Beide worden afgerond op "21:9" in productvermeldingen. Als u exacte pixelafmetingen nodig heeft, bereken dan de echte paneelresolutie in plaats van het label.
Hoe houd ik een beeldverhouding bij als het resultaat geen geheel getal is?
De rekenmachine rondt af naar de dichtstbijzijnde hele pixel, die hooguit een halve pixel van drift introduceert - in de praktijk onzichtbaar Video-encoders zijn strenger: H.264 vereist even afmetingen, dus rond de oneven zijde naar beneden met één pixel als een encoder je grootte afwijst.
Werkt deze rekenmachine offline?
Ja. Elke berekening is gewone JavaScript-rekenkunde die in uw browser wordt uitgevoerd. Er worden geen dimensies naar een server verzonden, er wordt niets gelogd en de tool blijft werken zonder internetverbinding nadat de pagina is geladen.
Gerelateerde tools
- Afbeelding wijzigen- pas de afmetingen toe die u zojuist hebt berekend, in de browser
- Afbeelding samendrukken- verklein het bestand zodra de vorm goed is
- Percentage rekenmachine- voor de schaal-per-procent helft van de baan
- Grafiekvoorbeeld openen- controleer die 1.91:1 afbeelding voordat u de link verzendt
- Formaat converterteneinde WEBP en AVIF voor de activa die u zojuist hebt gedimensioneerd
Verder lezen: De complete gids voor beeldcompressie en Essentiële beeldhulpmiddelen voor het web.
