Una volta ho spedito un tema WordPress in cui ogni immagine in primo piano sul cellulare sembrava essere stata attraverso un mangle. Volti allungati, loghi schiacciati. La causa era di tre caratteri in un file CSS: a height: 240px Seduto accanto a a width: 100%. Su un telefono da 375 pixel che produceva un rapporto di circa 1,56:1, e le immagini erano 16:9 - 1,78:1. non una differenza enorme sulla carta Molto evidente su un volto umano.
Le proporzioni sono una di quelle cose che sembrano troppo semplici per sbagliare, quindi nessuno lo controlla. è un'unica divisione. Eppure rovina silenziosamente le esportazioni di video, le anteprime di OpenGraph che vengono ritagliate nel posto sbagliato, le miniature con barre nere e le immagini degli eroi che stanno bene sul tuo monitor da 27 pollici e terribili su un telefono. La matematica è banale, il costo di un errore di arrotondamento non lo è.
io costruisco Toolz.dev e faccio questo calcolo costantemente - dimensionamento delle immagini per un plugin's schermi di amministrazione, esportazione di Reels-formato video, elaborazione di ciò che un'immagine OpenGraph dovrebbe essere in realtà Così ho costruito il Calcolatrice delle proporzioni farlo in un campo e mostrare il suo funzionamento. Dagli un rapporto e una dimensione, ti dà l'altra. Dagli una dimensione, lo riduce al rapporto e ti dice come viene chiamato quel rapporto.
tl; dr: Il rapporto di aspetto è la larghezza divisa per altezza, scritta come due numeri con due punti. Per trovare un'altezza mancante:
width × (ratioHeight ÷ ratioWidth). Per trovare una larghezza mancante:height × (ratioWidth ÷ ratioHeight). Per ottenere il rapporto da una dimensione, dividere entrambi i numeri per il loro massimo comun divisore - 1920 e 1080 condividono un MCD di 120, che dà 16:9. il Calcolatrice delle proporzioni Fa tutti e tre nel tuo browser, con preset per 16:9, 9:16, 1:1, 4:3, 3:2, 21:9, 1.91:1 e 2.39:1.
Che cos'è un rapporto di aspetto?
Un rapporto d'aspetto è la relazione proporzionale tra un'immagine's larghezza e la sua altezza È scritto come due numeri separati da due punti - 16:9, 4:3, 1:1 - e ciò che descrive è foggiare, non dimensioni.
Quella distinzione è l'intero gioco.1280 × 720, 1920 × 1080 e 3840 × 2160 sono tre diverse risoluzioni con un rapporto d'aspetto Sono la stessa forma a tre dimensioni, motivo per cui ognuno di essi scala in qualsiasi altro senza distorsione o ritaglio Nel frattempo 1920 × 1080 e 1920 × 1200 hanno quasi la stessa larghezza, differiscono di 120 pixel di altezza e sono forme fondamentalmente diverse - uno è 16:9, l'altro è 16:10, e mettendo il contenuto progettato per uno in un contenitore costruito per l'altro mezzo letterboxing o un ritaglio.
Il rapporto è solo larghezza ÷ altezza espressa come frazione in termini più bassi. 1920 ÷ 1080 = 1.777…, e la frazione 1920/1080 si riduce a 16/9. Entrambi sono lo stesso fatto dichiarato in due modi: la forma decimale è più facile da confrontare (è 1,78 più largo di 1,5? Ovviamente) e la forma dei due punti è più facile da dire.
I tre calcoli di cui hai effettivamente bisogno
Risolvere per una dimensione mancante
Conosci la forma e un lato Questo è il caso più comune in pratica: & quot; Ho bisogno di un'immagine 16:9 e il mio contenitore è largo 1280 pixel - quanto alto?"
height = width × (ratioHeight ÷ ratioWidth)
= 1280 × (9 ÷ 16)
= 720
E nell'altra direzione:
width = height × (ratioWidth ÷ ratioHeight)
= 1080 × (16 ÷ 9)
= 1920
Nella calcolatrice, scegli un preset o digita il tuo rapporto, compila la dimensione che conosci, lascia l'altro vuoto e premi Calcola. Riempie il campo vuoto e mostra l'aritmetica sottostante.
riducendo una dimensione al suo rapporto
Hai una dimensione e vuoi conoscerne la forma, di solito per verificare che due risorse corrispondano o per capire cosa è effettivamente un'esportazione di dimensioni misteriose di client's.
Il metodo è il più grande divisore comune. Trova il numero più grande che divide le due dimensioni in modo uniforme e dividi entrambe per esso. Per 1920 e 1080 quel numero è 120: 1920 ÷ 120 = 16, 1080 ÷ 120 = 9. Rapporto 16:9.
È qui che le risposte diventano interessanti, perché spesso le dimensioni del mondo reale lo fanno no riduci a un rapporto favorevole al marketing Un monitor ultrawide da 3440 × 1440 si riduce a 43:18. uno da 2560 × 1080 si riduce a 64:27. entrambi sono venduti come & quot;21:9", e nessuno dei due in realtà è - 21:9 sarebbe 3360 × 1440. L'etichetta è un arrotondamento del decimale (≈2,39:1 e ≈2,37:1) in qualcosa che suona ordinato accanto a 16:9. Il calcolatore ti dà il rapporto ridotto reale e il decimale, quindi puoi dimensionare dalla realtà piuttosto che da un foglio di specifica.
ridimensionamento e montaggio
Due varianti della stessa idea. scalata moltiplica entrambe le dimensioni per lo stesso fattore, che per definizione preserva il rapporto: una scala del 50% di 1920×1080 è 960×5440, sempre 16:9. prova riduce la dimensione della sorgente finché non si trova all'interno di un riquadro di delimitazione senza distorsioni: prendi il più piccolo di boxWidth ÷ sourceWidth e boxHeight ÷ sourceHeight e scala con quello. Una foto 4000 × 3000 montata in una scatola 1200 × 1200 diventa 1200 × 900. Questo è esattamente ciò che CSS object-fit: contain fa, ed esattamente cosa fa un'immagine CDN quando si chiede un ridimensionamento della dimensione massima.
Caratteristiche principali del calcolatore delle proporzioni
Dieci preset, etichettati con dove vengono effettivamente utilizzati
16:9 per video standard e la maggior parte dei display. 9:16 per bobine, cortometraggi, tiktok e storie. 1:1 per posti sociali quadrati e avatar. 4:3 per i display più vecchi e iPad. 3:2 per la fotografia DSLR e pellicola da 35 mm. 2:3 per stampe di ritratti. 5:4 per stampe 8×10. 21:9 per ultrawide. Per le immagini di collegamento OpenGraph-Preview 2.39:1 per widescreen anamorfico. Passare il mouse ti dice a cosa serve, che conta più del numero quando stai cercando di ricordare quale Instagram vuole.
La formula sotto ogni risposta
Il pannello dei risultati mostra l'aritmetica esatta - 1280 × (9 ÷ 16) = 720. In parte in modo da poterlo verificare, in parte in modo da poterlo passare in un foglio di calcolo o in uno script. Se stai per codificare una dimensione in un file CSS o in una configurazione in coda, dovresti essere in grado di vedere da dove viene il numero.
Il rapporto ridotto, il decimale e il nome
Ogni risultato riporta tutte e tre le rappresentazioni: il rapporto intero ridotto (16:9), la sua forma decimale (1.778:1) e un nome comune se ne ha uno. Decimale è ciò che confronta; il nome è quello che digiti in un brief di progettazione.
Megapixel e numero totale di pixel
Ogni risultato include il numero di pixel in megapixel Questo è il numero che prevede effettivamente l'uso della memoria e la dimensione del file quando si stanno ridimensionando le immagini - una foto da 4000 × 3000 è di 12 MP, e raddoppiando le sue dimensioni quadruplica quella a 48 MP, non la raddoppia Se si stanno generando set di immagini responsive, quella relazione quadratica è la cosa da tenere nella testa Quando si è finito il dimensionamento, Ridimensionamento immagine e Comprimi immagine Fai il lavoro vero e proprio, nel browser.
Un'anteprima di forma dal vivo
Un rettangolo nel pannello dei risultati, disegnato in base al rapporto che hai appena calcolato Sembra decorativo e non lo è - il modo più veloce per catturare che hai digitato 9:16 quando intendevi 16:9 è guardare una scatola alta quando te ne aspettavi una larga.
Lato client, offline, nessuna registrazione
Aritmetica JavaScript semplice nel tuo browser. Nulla viene inviato da nessuna parte, non viene registrato nulla e la pagina continua a funzionare con la rete spenta.
Quale rapporto di aspetto dovrei usare?
| rapporto | decimale | dove si usa | Dimensione tipica dei pixel |
|---|---|---|---|
| 16:9 | 1.778 | YouTube, video HD/4K, la maggior parte dei monitor, TV | 1920 × 1080, 3840 × 2160 |
| 9:16 | 0,563 | Reels Instagram, TikTok, cortometraggi su YouTube, storie | 1080 × 1920 |
| 1:1 | 1.0 | Post di feed di Instagram, avatar, miniature dei prodotti | 1080 × 1080 |
| 4:5 | 0,8 | Post di Instagram per ritratti (impronta di feed più grande) | 1080 × 1350 |
| 1.91:1 | 1.91 | Anteprime dei link di OpenGraph / Twitter | 1200 × 630 |
| 4:3 | 1.333 | iPad, vecchi monitor, molti sensori per fotocamera | 2048 × 1536 |
| 3:2 | 1.5 | DSLR e mirrorless, film da 35 mm, stampe fotografiche | 6000 × 4000 |
| 21:9 (davvero ~2.37–2.39:1) | ~2.38 | Monitor ultrawide, colture cinematografiche | 3440 × 1440 |
| 2.39:1 | 2.39 | Cinema anamorfico a schermo | 4096 × 1716 |
Due note pratiche La dimensione 1200 × 630 OpenGraph si riduce a 40:21, un decimale di 1.905 - abbastanza vicino a 1.91:1 che tutti lo chiamano così, ed è la dimensione Facebook, LinkedIn e X tutte rendono in modo pulito Controlla il risultato con il Apri l'anteprima del grafico Strumento prima di spedirlo, perché un'immagine di anteprima ritagliata male è il bug più visibile su un collegamento che nessuno fa clic. E vale la pena conoscere 4:5 per Instagram in particolare: occupa più spazio verticale nel feed di 1:1, che è l'attenzione gratuita.
Casi d'uso comuni
Dimensionamento di immagini reattive senza distorsioni
Stai creando una griglia di carte e il design richiede miniature 16:9 con una larghezza del contenitore di 384 pixel. Calcola: 384 × 9 ÷ 16 = 216. Ora hai una dimensione concreta per entrambi i tuoi CSS aspect-ratio: 16 / 9 dichiarazione e l'esportazione delle immagini, e sono d'accordo tra loro I moderni CSS rendono tutto questo più facile di quanto non fosse in passato - aspect-ratio in CSS prende direttamente il rapporto e lascia che il browser faccia l'aritmetica - ma hai ancora bisogno delle dimensioni dei pixel per l'asset stesso.
Esportazione di video per una piattaforma specifica
Hai girato 16:9 e hai bisogno di un taglio verticale 9:16 L'altezza rimane a 1920, quindi la larghezza è 1920 × 9 (CELEF 16) = 1080. Questa è la tua dimensione di esportazione - e il motivo per cui i numeri sembrano familiari è che 1080 × 1920 è semplicemente 1920 × 1080 con gli assi scambiati, che è ciò che & quot; video & quot verticale; significa.
Una cosa che la calcolatrice non farà per te: H.264 richiede dimensioni uniformi. Se i tuoi calcoli arrivano su un numero dispari, arrotonda il lato dispari di un pixel o il tuo codificatore rifiuterà il lavoro.
capire cosa sia in realtà una risorsa misteriosa
Un cliente invia asset a 1440 × 1800 e chiede perché ritagliano male sulla homepage Riducilo: il GCD di 1440 e 1800 è 360, dando 4:5. gli slot della tua homepage sono 16:9. Quelle due forme non possono essere soddisfatte entrambe senza ritagliare - ora hai una risposta concreta e una decisione da prendere, piuttosto che una vaga sensazione che qualcosa sia spento.
Verificare che un insieme di risorse sia coerente
Prima di un lancio, esegui le dimensioni di ogni immagine eroe attraverso la modalità rapporto. Se uno dei trenta torna a 1,6:1 mentre il resto è 1.778:1, hai trovato la risorsa che sembrerà sottilmente sbagliata sul sito live e l'hai trovata prima di un utente.
Note tecniche da conoscere
arrotondamento. La maggior parte dei calcoli del rapporto non si ferma su pixel interi. 16:9 a una larghezza di 1000 dà un'altezza di 562,5. la calcolatrice arrotonda al pixel intero più vicino, quindi ottieni 563 - una forma che è 1,7762:1 anziché 1,7778:1, una differenza di circa un decimo dell'uno per cento e invisibile Non inseguirlo Nota che arrotondare costantemente piumino Attraverso un set di immagini può accumulare una deriva visibile se si stanno impilando elementi; arrotonda ogni volta dalla dimensione di origine anziché dal risultato precedente.
Proporzioni pixel rispetto alle proporzioni del display. Nel video trasmesso questi possono differire: il vecchio filmato DV memorizzava 720 × 480 pixel ma li mostrava come 4:3 rendendo ogni pixel non quadrato Quasi nulla di ciò che tocchi oggi fa questo - tutto è pixel quadrati - ma se stai lavorando con filmati legacy e la matematica si rifiuta di sommarsi, ecco perché.
aspect-ratio In CSS. Dal 2021 puoi scrivere aspect-ratio: 16 / 9 E lascia che il browser mantenga la forma mentre una dimensione è fluida. Usalo. Rimuove un'intera classe degli hack percentuali di riempimento che erano necessari e significa che il tuo layout rimane corretto a larghezze che non hai mai testato. Vuoi ancora la calcolatrice per l'esportazione dell'asset, perché il file immagine deve essere un numero reale di pixel.
Il ritaglio non è in scala. Se un rapporto di origine e di destinazione differiscono, non è possibile ridimensionare tra di loro - è necessario ritagliare, cassetta delle lettere o distorcere Scegliere deliberatamente. object-fit: cover ritagli (e di solito è quello che vuoi per le foto), contain cassette delle lettere (di solito quello che vuoi per i loghi) e fill distorce (quasi mai quello che vuoi e la causa del mio bug di facce mangled nella parte superiore di questo articolo).
FAQ
Come faccio a calcolare le proporzioni in base alla larghezza e all'altezza?
Dividi entrambi i numeri per il loro più grande divisore comune. Per 1920 × 1080 il GCD è 120, quindi il rapporto si riduce a 16:9. Cambia questa calcolatrice per ottenere la modalità rapporto, inserisci entrambe le dimensioni e fa la riduzione e nomina il rapporto per te.
Di quale altezza ho bisogno per un'immagine 16:9 a 1280 pixel di larghezza?
Moltiplicare la larghezza per 9 e dividere per 16: 1280 × 9 ÷ 16 = 720. Quindi un'immagine 16:9 di 1280 pixel di larghezza è alta 720 pixel. Inserisci il preset 16:9 e una larghezza di 1280 per confermarlo.
Qual è la differenza tra proporzioni e risoluzione?
Il rapporto d'aspetto è la forma - la proporzione tra larghezza e altezza La risoluzione è il numero effettivo di pixel 1280 × 720 e 1920 × 1080 sono risoluzioni diverse con lo stesso rapporto d'aspetto 16:9, motivo per cui uno scala all'altro senza distorsione o ritaglio.
Quale rapporto di aspetto dovrei usare per i social media?
Usa 1:1 o 4:5 per i feed post di Instagram, 9:16 per Reels, Stories, TikTok e YouTube Shorts, 16:9 per i video YouTube standard e 1.91:1 per Grafico aperto link immagini di anteprima su Facebook, LinkedIn, e X. I preset in questo strumento includono tutti questi.
Perché la mia immagine ridimensionata sembra allungata?
La nuova larghezza e altezza non corrispondono al rapporto originale, quindi l'immagine viene schiacciata lungo un asse Calcola l'altezza target dalla larghezza target utilizzando il rapporto originale invece di digitare entrambi i numeri a mano: questo è esattamente ciò a cui serve la modalità risolvi per il lato mancante.
Cosa significa in realtà 21:9?
È un'etichetta di marketing per display ultrawide. Il rapporto reale di un monitor 3440 × 1440 è 43:18, circa 2,39:1 e un pannello 2560 × 1080 è 64:27. Entrambi vengono arrotondati a "21:9" nelle liste dei prodotti. Se hai bisogno di dimensioni esatte dei pixel, calcola dalla risoluzione del pannello reale anziché dall'etichetta.
Come faccio a mantenere un rapporto di aspetto quando il risultato non è un numero intero?
La calcolatrice arrotonda al pixel intero più vicino, che introduce al massimo mezzo pixel di deriva - invisibile nella pratica Gli encoder video sono più severi: H.264 richiede dimensioni pari, quindi arrotonda il lato dispari verso il basso di un pixel se un encoder rifiuta la tua dimensione.
questo calcolatore funziona offline?
si. Ogni calcolo è un semplice aritmetica JavaScript in esecuzione nel tuo browser. Nessuna dimensione viene inviata a un server, non viene registrato nulla e lo strumento continua a funzionare senza connessione Internet una volta caricata la pagina.
Strumenti correlati
- Ridimensionamento immagine- applica le dimensioni appena calcolate, nel browser
- Comprimi immagine- rimpicciolisci il file una volta che la forma è giusta
- Calcolatrice percentuale- per la metà scala per percentuale del lavoro
- Apri l'anteprima del grafico- controlla quell'immagine 1.91:1 prima di spedire il collegamento
- convertitore di formato- webp e AVIF per le risorse che hai appena dimensionato
Ulteriori letture: La guida completa alla compressione delle immagini e Strumenti di immagine essenziali per il web.
