Quantcast
Channel: WordPress.org Forums » [WooCommerce] Support
Viewing all articles
Browse latest Browse all 104029

cubecolour on "[Plugin: WooCommerce - excelling eCommerce] Catalog Images different sizes"

$
0
0

I'm working on a site at the moment (not live yet) for an artist showing his paintings in a grid display and it sounds like I came up against the same issue.

Here, the original canvases are different sizes so the aspect ratio of the images vary; some are landscape and some are portrait

The best solution for me was to specify the featured image size as a square (use 385px × 385px as an example) with no cropping so the landscape one come out at 385px wide with a different heights and the portrait ones 255px high with different widths.

As each image is within a link, we can use the link as a containing element specified as a 385px square with the image sittin inthe centre of the square at its original aspect ratio with either a shaded background showing top & bottom or a shaded background showing left & right

The css I'm using for this is as below, perhaps something similar adjusted for your site would help?

.artwork-featured-image a {
	background: #ecede5;
	border: 0;
	float: left;
	margin: 0 0 12px 0;
	padding: 0;
	height: 385px;
	width: 385px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
}

.artwork-featured-image a img {
	position: absolute;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

Viewing all articles
Browse latest Browse all 104029

Trending Articles