Bootstrap 4 Images & Thumbs dimensions for e-commerce website

bs4-images-dimensions-for-ecommerce-website.txt

/*=====================================================================================
=            Bootstrap 4 Images & Thumbs dimensions for e-commerce website            =
=====================================================================================*/


categories
----------

    banner
    ......

        screen > 1200px      825 x 170  = categories/bannieres/
        screen < 1200px      690 x 142  = categories/bannieres/thumbs/lg
        screen <  992px      510 x 105  = categories/bannieres/thumbs/sm
        screen <  768px      510 x 105
        screen <  576px      528 x 109  = categories/bannieres/thumbs/md

    photo
    .....

        screen > 1200px      253  = categories/photos/thumbs/lg
        screen < 1200px      208  = categories/photos/thumbs/sm
        screen <  992px      238  = categories/photos/thumbs/md
        screen <  768px
        screen <  576px      398  = categories/photos/


sub-categories:
---------------

    cf. categories


products
--------
    product full size
    .................

    960px * 720px

    product lists
    .............
                             photos
        screen > 1200px      253
        screen < 1200px      208
        screen <  992px      238
        screen <  768px      238
        screen <  576px      398


    product details
    ...............
                             photos      thumbs
        screen > 1200px      398         77
        screen < 1200px      330         60
        screen <  992px      240         38
        screen <  768px      240         38
        screen <  576px      398         110

    all sizes
    .........

         38
         60
         77
        110       = articles/thumbs/sm
        208
        238
        240       = articles/thumbs/md
        253
        330
        398       = articles/thumbs/lg
        960 x 720 = articles/ [full size]


page header
-----------

X/3/1.618 ~= Y

        screen > 1200px      1110        229
        screen < 1200px      930         192
        screen <  992px      690         142
        screen <  768px      510         105
        screen <  576px      528         108