Calculadora de relació d'aspecte

Com utilitzar la calculadora de relació d’aspecte

1. Tria una de les Relacions habituals (16:9, 4:3, 21:9, 1:1, 9:16, 3:2, 16:10, 4:5) o escriu els teus valors a Relació o mida original. Pots introduir una relació (16 i 9) o les dimensions reals d’una imatge, un vídeo o una pantalla (1920 i 1080).
2. Llegeix els resultats: la Relació simplificada, la Relació decimal (amplada dividida per alçada), l’Orientació i l’Estàndard més proper. El signe «≈» vol dir que la teva mida s’hi acosta, però no hi coincideix exactament.
3. A Mida nova (manté la relació), escriu una Amplada nova per obtenir l’alçada corresponent, o una Alçada nova per obtenir l’amplada. La línia de sota mostra el càlcul. Desmarca Arrodoneix a píxels enters si necessites el valor exacte, per exemple per a mides d’impressió en mil·límetres.
4. Intercanvia amplada i alçada converteix una relació apaïsada en vertical (el 16:9 passa a 9:16) i viceversa.
5. La Previsualització dibuixa un requadre amb la teva relació, i la taula mostra la mida de cada relació habitual amb la nova amplada.
6. Copia el Codi CSS amb el botó Copia.

Com funciona el càlcul

Una relació d’aspecte és l’amplada dividida per l’alçada, escrita com a dos nombres enters. Per simplificar-la, l’eina divideix tots dos costats pel seu màxim comú divisor (MCD): el MCD de 1920 i 1080 és 120, de manera que 1920:1080 = 16:9. Si introdueixes decimals, primer es multipliquen per una potència de deu (2,39:1 passa a ser 239:100).

Per canviar la mida mantenint les proporcions, n’hi ha prou amb una regla de tres:

• alçada nova = amplada nova × alçada original ÷ amplada original
• amplada nova = alçada nova × amplada original ÷ alçada original

Exemple: un vídeo 16:9 d‘1280 px d’amplada fa 1280 × 9 ÷ 16 = 720 px d’alçada.

Algunes pantalles tenen relacions «estranyes». Un portàtil de 1366 × 768 se simplifica a 683:384, és a dir 1,779:1, molt a prop del 16:9 (1,778:1); per això apareix «≈ 16:9». Els monitors que es venen com a 21:9 en realitat són 64:27 (2560 × 1080) o 43:18 (3440 × 1440), i per això els dos apareixen a la taula.

La propietat CSS aspect-ratio

aspect-ratio: 16 / 9; indica al navegador que calculi la dimensió que falta: amb width: 100%, l’alçada se n’obté automàticament i el requadre s’escala amb el seu contenidor. Funciona a tots els navegadors actuals (des del 2021) i és ideal per a vídeos incrustats, targetes, marcadors de posició d’imatge i miniatures. Combina-la amb object-fit: cover en les imatges per retallar-les en lloc d’estirar-les.

El codi també inclou la tècnica antiga del padding-top com a alternativa: un farciment en percentatge es calcula a partir de l’amplada, de manera que padding-top: 56.25% (9 ÷ 16) reserva una àrea 16:9 i el contingut es posiciona de manera absoluta a dins. Només la necessites per a navegadors molt antics.

Reservar l’espai amb una relació també evita els desplaçaments de la maquetació mentre es carreguen les imatges i els vídeos, cosa que millora la puntuació del Cumulative Layout Shift (CLS).