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

Resolver los problemas de imágenes recortadas

Many images on your site will crop either horizontally, vertically, or both. This helps your images look their best within your site's layout and in different browser sizes.

This guide will help you understand the normal cropping that happens in Squarespace and learn how to minimize it as much as possible.

Tip: To crop the original image, use the Image Editor or third party software.

Understanding cropping

Every image on your site is in a container, which is an invisible box that controls how the image displays in relation to other content on the page. When an image is loaded into a container, one of two things happens, depending on the container's settings:

  • Most of the time - The image conforms to the container's dimensions, which vary based on browser width. If the image isn't the same shape as the container, the image crops to fill the container completely.
  • Sometimes - The container’s shape conforms to the dimensions of the image so the whole image displays.

In most cases, images on your site display within the containers' dimensions, and will experience some cropping. This helps images look their best while adapting to different browser sizes.

bryler-overlay.png

Bloques de imágenes

Image Blocks display images at their original height and width ratio, within your site's layout restrictions.

Consejos:

  • Crop the image with the cropping handle. To reset the image to its original dimensions, double-click the cropping handle.
  • After cropping, use the focal point to center the image.
  • Make the image smaller by adding Spacer Blocks on either side.

Cabeceras

Si las imágenes de banner tienen la misma relación de aspecto, es más fácil predecir cómo se recortarán. Asegúrate de optimizar las imágenes siguiendo nuestros consejos de formato de imágenes de banner.

Existen otras formas de controlar el recorte de banner en tu sitio, dependiendo de la versión de Squarespace en la que esté tu sitio.

Los banners siempre se recortarán hasta cierto punto, especialmente en un dispositivo móvil. Para personalizar el banner, puedes:

Para saber cómo aparecen tus banners en dispositivos móviles, visita ¿Cómo aparecerá mi sitio en dispositivos móviles?  

Cabeceras de página

Con algunas excepciones, los banners de página siempre se recortarán hasta cierto punto, especialmente en dispositivos móviles. La cantidad de recorte depende de la altura del banner y del ancho del navegador.

Consejos:

Cabeceras en todo el sitio

Images added to site-wide banner images (added within Site Styles) can repeat, display at the banner height or width, or fill the container completely.

Consejos:

Imágenes de fondo o videos

El modo en que controlas el recorte de imágenes de fondo o videos depende de la versión de Squarespace en la que se encuentre tu sitio.

Si la imagen o el video de fondo de la sección aparecen recortados, cambia la altura o el ancho de la sección para mostrar más de la imagen o el video.

Para obtener más información, visita Secciones de página en la versión 7.1

Background images can repeat, display at the browser height or width, or fill the browser screen completely.

Consejos:

  • Use Site Styles to choose how the banner image displays.
  • See our troubleshooting tips for help with mobile display.
  • Images that are more than 2500 pixels along their longest edge can cause issues on mobile devices.
  • When choosing a full-bleed background image, consider how visitors will access your site.

Secciones de galería y Páginas de galería

Según qué versión de Squarespace usa tu sitio, el sitio tendrá distintas opciones de galería.

Upload and manage images directly in the gallery section, then use the Gallery tab to control how images display. 

Para informarte mejor, visita Secciones de galería en la versión 7.1.

How images appear in your Gallery Page depends on your template. Visit your template's guide to learn how images might crop to fit your Gallery Page’s design.

Bloques de Galería

How images display in a Gallery Block depends on the format: Slideshow, Grid, Carousel, or Stacked.

Consejos:

  • For any format, resize the whole block by adding Spacer Blocks on either side.
  • Slideshow - The gallery’s height is set by the widest image. To avoid cropping or blank space around images, use images with similar aspect ratios.
  • Grid - In the Design tab, use the aspect ratio to crop all images to the same shape, and change the number of thumbnails per row to change their size. Use the focal point to adjust how each image centers.
  • Carousel - Adjust the height with the cropping handle.
  • Stacked - Each image expands to fill the width of the page or column the block is in.

Portfolio and Index Pages

Las Páginas de portafolio y de índice son tipos distintos de páginas en diferentes versiones de Squarespace, pero funcionan de manera similar:

Posiciona el cursor sobre una sección de portafolio para agregar una imagen y, a continuación, utiliza la pestaña Galería para controlar cómo se muestra. 

Para informarte mejor, consulta Páginas de portafolio.

How images appear in an Index Page depends on your template. Visit your template's guide to learn more.

Páginas de la tienda

How cropping affects product images depends on which version of Squarespace your site is on.

Después de cargar imágenes a las secciones de tu tienda, usa los ajustes de sección de la tienda para darles estilo. Mientras editas una página, haz clic en el ícono de lápiz. Puedes cambiar el espaciado, las columnas, la relación de aspecto y la alineación del texto. Experimenta con diferentes ajustes de estilo para establecer cómo se muestran las imágenes del producto. Para obtener más información sobre cómo personalizar tu página de tienda, visita las secciones de la página de la colección en la versión 7.1.

Relación de aspecto de imágenes de los productos

No es posible recortar automáticamente las imágenes de productos en las páginas de tienda. Recomendamos que las imágenes tengan relaciones de aspecto similares. Por ejemplo, antes de cargar imágenes en tu sitio web, verifica que tengan una orientación horizontal o vertical coherente.

Si las imágenes de tus productos tienen diferentes orientaciones, utiliza nuestro editor de imágenes integrado o herramientas de terceros para recortarlas. También puedes crear un diseño personalizado para tus productos mediante Bloques de producto.

El recorte de las imágenes de productos en la página de aterrizaje depende del tipo de página de Tienda de la plantilla.

Clásico

  • In Site Styles, use the Product Image Auto Crop tweak to choose whether the images crop to the same shape, or display at their original shapes.
  • If you're cropping, use the Product Item Size tweak to set the shape.
  • Use the focal point to adjust where the image centers.
  • If you're not cropping, use the Product Overlay Color tweak to choose the color that displays behind the image.
  • Para obtener más ayuda, visita Cómo modificar el estilo de páginas de Tienda

prodpagebackground.png

Avanzado

  • La página de tienda avanzada siempre recorta las imágenes con la misma forma. Esto ayuda a darle un aspecto cohesivo.
  • Para establecer la forma de todas las imágenes de la página de tienda, utiliza el ajuste Relación de aspecto de imagen en la sección Productos: Diseño de Estilos del sitio.
  • Use the focal point to adjust where the image centers.

advancedprodcutscropping.png

Único

Visita estos enlaces para obtener información sobre los estilos de miniatura de cualquiera de las páginas de tienda exclusivas:

Páginas de Portada

La versión 7.1 no admite Páginas de portada.

Las páginas de portada siempre se recortarán hasta cierto punto, especialmente en dispositivos móviles. La cantidad de recorte depende de la altura de la imagen, el ancho del navegador y el diseño que hayas elegido.

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 14 de 145
Resolver los problemas de imágenes recortadas