Big Cartel Theme Support

How do I set a uniform aspect ratio for the product image thumbnails?

How do I set a uniform aspect ratio for the product image thumbnails?

Setting an aspect ratio for your product image thumbnails will force the images to be scaled / cropped to the same width to height (aspect) ratio. In other words, all images will be forced to display at the same size, even if your product images are different sizes (e.g. a mix of portrait, square and landscape images).

To set a uniform aspect ratio for the product image thumbnails, navigate to your custom style coding area — see Where do I add custom style code? — and add the following CSS:

/* Set thumbnail aspect ratio */
.products.grid .image-wrap > .image img {
	visibility: hidden;
}
.products.grid .image-wrap > .image {
	overflow: hidden;
	height: 0;
	padding-bottom: 60%;
	background-position: center top;
}

Once you have added this code, you can edit the last two properties to suit your needs:

padding-bottom: 73.33%;

The padding-bottom value defines the height of your thumbnail images as a percentage of the width. The value can be any positive number immediately followed by the % sign (and ending with a semicolon as all CSS properties must do). Note that decimals are allowed as shown in the example above.

As expected, a value less than 100% will be landscape, a value of 100% will be square and a value greater than 100% will be portrait.

background-position: left center;

The background-position value defines how images are positioned within the envelope of your thumbnails. The value must be two words separated by a space (and ending with a semicolon as all CSS properties must do). The first word can be left, center or right and defines the horizontal position of your images. The second word can be top, center or bottom and defines the vertical position of your images.

Click the Done and Save links to apply your changes.

Targeting specific products

In some cases you may want to set an aspect ratio for a certain product or products. You can do this using the methods detailed in Using the article tag to create product specific custom styles.

For example, if we wanted to set an aspect ratio for all products in the product category Chairs:

/* Set thumbnail aspect ratio for Chairs category */
.products.grid .chairs .image-wrap > .image img {
	visibility: hidden;
}
.products.grid .chairs .image-wrap > .image {
	overflow: hidden;
	height: 0;
	padding-bottom: 60%;
	background-position: center top;
}

Containing rather than cropping

If cropping the images does not provide the appearance you desire, you may find that containing the image (i.e. shrinking the image so it fits entirely within the defined thumbnail envelope) is more suitable. To do this, we simply add background-size: contain; to our original CSS:

/* Set thumbnail aspect ratio */
.products.grid .image-wrap > .image img {
	visibility: hidden;
}
.products.grid .image-wrap > .image {
	overflow: hidden;
	height: 0;
	padding-bottom: 60%;
	background-position: center top;
	background-size: contain;
}

As with the original code, the padding-bottom value can be changed to adjust the size of images and the background-position value can be changed to position the images as needed.

Creating thumbnail specific images

If none of the above options suit, you may wish to create images specifically for thumbnail display - see How do I use an image for my thumbnails that will not be displayed on my product pages?

AarcadeHow do I set a uniform aspect ratio for the product image thumbnails?