Nota: Si bien hemos traducido las guías más populares al español, algunas guías están disponibles solamente en inglés.

Qué es la relación de aspecto

La relación de aspecto es la relación proporcional entre el ancho y el alto de una imagen. En esencia, describe la forma de una imagen.

Las relaciones de aspecto se expresan como una fórmula de ancho por altura, como esta: 3:2.

Por ejemplo, una imagen cuadrada tiene una relación de aspecto de 1:1, debido a que la altura y el ancho son iguales. La imagen podría tener 500px × 500px o 1500px × 1500px, y la relación de aspecto seguirá siendo 1:1.

Otro ejemplo: una imagen vertical podría tener una relación de aspecto de 2:3. Con esta relación de aspecto, la altura es 1.5 veces superior al ancho. Por lo tanto, la imagen podría tener 500px × 750px, 1500px × 2250px, entre otros.

Las relaciones de aspecto y Squarespace

Muchas opciones de Estilos del sitio te permiten seleccionar las relaciones de aspecto para diferentes tipos de imágenes, como miniaturas de publicaciones de blog, imágenes de galería o productos.

  • Por ejemplo, si eliges una relación de aspecto de 3:2 para las miniaturas de las publicaciones de blog, todas las miniaturas de las publicaciones de blog de tu Página de Blog se recortarán con esa forma.
  • Debido a que las imágenes se amplían o reducen para adaptarse al ancho de los diferentes navegadores, no tienen dimensiones exactas (como 750px x 500px), pero siempre tendrán la misma forma.
  • Empezar con imágenes que tienen la misma relación de aspecto te permite predecir cómo se recortarán.
  • Puedes cambiar la altura de algunos bloques de imagen utilizando el controlador de recorte. Para obtener más información sobre cómo recortar imágenes, visita Solución de problemas de recorte.

Las opciones exactas de relación de aspecto disponibles dependen de tu versión y plantilla. Este es un ejemplo de la Página de blog en la plantilla Brine:

brine-blog-example.png

Algunos retoques de estilo te permiten ignorar las relaciones de aspecto. En estos casos, tus imágenes conservarán su forma original. Por ejemplo, en la página de blog de la plantilla Skye, puedes elegir Recorte de imágenes: Ninguno.

skye-blog-example.png

Recortar según una relación de aspecto

Además de usar las opciones de estilo integradas, tal vez quieras recortar manualmente una imagen según una relación de aspecto determinada. Por ejemplo, si usas imágenes de productos que tienen la misma relación de aspecto, todas se recortarán del mismo modo en tu sitio.

Opción 1: Recortar según una forma predefinida

Usa el editor de imágenes integrado para recortar imágenes con una forma específica. Después de abrir el editor, usa la herramienta Recortarpara seleccionar las relaciones de aspecto predefinidas.

Consejo: Si prefieres hacerlo antes de subir la imagen, algunas herramientas externas tienen opciones de relación de aspecto predefinidas.

Opción 2: Dimensiones personalizadas

Para recortar imágenes según una relación de aspecto personalizada que no ofrezca nuestro editor de imágenes integrado, usa un editor externo.

Debido a que las imágenes no deben tener las mismas dimensiones para tener la misma relación de aspecto, es mejor recortarlas según una relación específica que intentar adaptar sus dimensiones exactas. Para obtener los mejores resultados, recorta el lado más corto.

  • Por ejemplo, si tu imagen tiene 1500px x 1200px y quieres una relación de aspecto de 3:1, recorta el lado más corto para que la imagen tenga 1500px x 500px.
  • No amplíes el lado más largo. Esto puede hacer que tu imagen se vea borrosa.

Para calcular la longitud que debe tener el lado más corto, usa una calculadora de relación de aspecto como esta. Ten presente que se trata de una aplicación externa que no está cubierta por el Soporte técnico de Squarespace.

  1. Busca las dimensiones de la imagen en tu computadora.
  2. En la calculadora de relación de aspecto, ingresa W1 y H1 a la izquierda para identificar la relación de aspecto actual.
  3. Ajusta el lado más corto hasta que encuentres la relación deseada.

Cabeceras de página

Los banners de página no tienen una relación de aspecto ni dimensiones predefinidas. Esto se debe a que se amplían y cambian de forma para adaptarse a diversos navegadores. Ten en cuenta lo siguiente:

Relación de aspecto para imágenes de productos

Es importante que las imágenes de tus productos sean atractivas para los clientes potenciales. Para ayudarte con esto, puedes establecer la relación de aspecto de las imágenes en las páginas de la tienda y de detalles del producto. Para obtener más información sobre cómo aplicar estilo a las imágenes, visita Imágenes de productos.

Si las imágenes de tus productos aparecen recortadas, visita Solución de problemas de recorte.

Relación de aspecto para videos

La imagen en miniatura del servicio de alojamiento de videos determina la relación de aspecto del video. Si colocas bloques de video en filas o utilizas galerías de cuadrícula, las filas pueden ser desiguales. En el caso de los bloques de video, no es posible cambiar esto.

Si utilizas Bloques de galería y Páginas de galería (solo en la versión 7.0) y los videos no aparecen correctamente, cambia los Estilos del sitio:

  • En Bloques de galería, habilita Recortar imágenes para proporcionar a los videos una relación de aspecto uniforme.
  • Para las Páginas de galería, configura la relación de aspecto en cualquier configuración, excepto Automática.

Relaciones de aspecto como porcentajes

En las galerías de Índice en cuadrícula de la familia de plantillas Brine, el ajuste de relación de aspecto aparece como un porcentaje que puedes ajustar con un control deslizante.

  • El control deslizante muestra valores de 0 a 160.
  • Configurarlo en 100 crea imágenes cuadradas.
  • Los valores por debajo de 100 tienen orientación horizontal.
  • Los valores por encima de 100 tienen orientación vertical.

Para crear una relación de aspecto exacta, divide la altura por el ancho. Por ejemplo:

  • Relación de aspecto 2:3: 3 ÷ 2 = 1.5, por lo que puedes ajustar el control deslizante en 150.
  • Relación de aspecto 3:2: 2 ÷ 3 = .667, por lo que debes ingresar 66.7 al lado del control deslizante.

Ejemplos de relaciones de aspecto

Estas son algunas relaciones de aspecto frecuentes y cómo lucen.

1-1.png

2-3.png

3-2.png

4-3.png

16-9.png

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 274 de 433