 Posted - 04/30/2020 : 21:14:41
Greetings all, there are 2 parts to the discussion here ...
(1) To make rows of div.category, div.product and div.csproduct outer containers equal in both width and height, the solution is certainly Flexbox [url="https://www.ecommercetemplates.com/support/topic.asp?TOPIC_ID=107608"]as explained here >>[/url]
But daringdiva asked ...
[quote]How would I make all product boxes the same size regardless of image height?[/quote]
(2) To make the preview image containers equal in both width and height, here is the CSS trick:
[font=Courier New][size=3]div.catimage,
div.prodimage,
div.csprodimage {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
text-align: center;
height: auto;
}
@media print, screen and (min-width: 40em) {
div.catimage,
div.prodimage,
div.csprodimage {
[red]max-width: 400px;[/red]
margin: 0 auto;
}
}
div.catimage a.ectlink,
div.prodimage.allprodimages a.ectlink,
div.csprodimage.allprodimages a.ectlink {
display: block;
width: 100%;
position: relative;
height: 0;
overflow: hidden;
[orange]/* for 16:9 aspect ratio */
/* [red]padding: 56.25% 0 0 0;[/red] */
/* for 4:3 aspect ratio */[/orange]
[red]padding: 75% 0 0 0;[/red]
}
img.catimage,
img.prodimage.allprodimages,
img.csprodimage.allprodimages {
position: absolute;
display: block;
max-width: 100%;
max-height: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}[/size=3][/font=Courier New]
Notes:
> For this to work, your first step is to save a backup of your existing CSS file. Then [orange]/* comment out and disable previous CSS entries */[/orange] for div.catimage, div.prodimage, div.csprodimage. Then copy/paste in my CSS. Upload, view website, CTRL+F5 to refresh the CSS.
> The [red]padding aspect ratio[/red] can be adjusted as preferred.
> If desired, you could add a border to div.catimage, div.prodimage, div.csprodimage. But I wouldn't bother with any padding.
> For a 4:3 photo, the target "productimage_small.jpg" size I suggest is 400px wide x 300px high to fill the container. So when uploading, set Small Image height to 300px. Make all small images that height to make your layout neat. (That is for a full 1920px HD screen width of products. If not using full screen width, then you can calculate a smaller "productimage_small.jpg" target image size to suit.)
> If your images are larger, they will be scaled down to fit. And if smaller, they will be aligned in the center of the image container, with some white space around.
Gary
[img]https://itzap.com.au/pics/logo/itzap-website-design-works-mini-logo.png[/img]
Edited by - ITZAP on 04/30/2020 23:28:26
| 
Image boxes on product page