_image-sizing.scss
Add or subtract image heights (px).
/* --------------- Image Variables --------------- */
/* Images - Add or subtract image heights (px). */
$img-heights: (36, 72, 144, 288);
/* --------------- /Image Variables --------------- */
The Image Sizing Class Prefix can be written in different ways depending on your desired specificity.
Abbr Strict | Strict | |
---|---|---|
Height | .img | .image |
The following breakpoint extension can be customized and extended in the variable-settings.scss file.
Ext | Def | Breakpoint | Device |
---|---|---|---|
-tn | tiny | 0px | Small Phone |
-xs | extra-small | 480px | Phone |
-sm | small | 640px | Small Tablet |
-md | medium | 768px | Tablet |
-lg | large | 992px | Laptop |
-xl | extra-large | 1200px | Desktop |
-pr | Printed Page | All Devices |
The following Image Sizing values are provided. Image Sizing values can be altered in the variable-settings.scss file. Be careful. Image Sizing values are tied to breakpoints. Your css can get rather large.
Ext | Size |
---|---|
-auto | Returns to default height. |
-flex | Grows to fill its container. |
-height-36 | 36px high |
-height-72 | 72px high |
-height-144 | 144px high |
-height-288 | 288px high |