Flexible Framework: Image Sizing

_image-sizing.scss

Image Sizing: Requirements

_breakpoint-variables.scss

Image Sizing: Variables

Add or subtract image heights (px).



/* --------------- Image Variables --------------- */

/* Images - Add or subtract image heights (px). */
$img-heights: (36, 72, 144, 288);

/* --------------- /Image Variables --------------- */



Image Sizing: Class Prefix Options (Required)

The Image Sizing Class Prefix can be written in different ways depending on your desired specificity.

Abbr Strict Strict
Height .img .image

Image Sizing: Class Breakpoint Extensions (Required)

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 print Printed Page All Devices

Image Sizing: Class Value Extensions (Required)

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

Image Sizing: Example Code



<!-- HEIGHT -->
<!-- Minimal: Image Sizing sets the height to 72px while maintaining the photos aspect ration. -->
<img class="img-tn-height-72" src="/img/photo.jpg">

<!-- Strict: Image Sizing sets the height to 288px while maintaining the photos aspect ration. -->
<img class="image-tn-height-288" src="/img/photo.jpg">

<!-- FLEX -->
<!-- Minimal: Image Flex makes images expand and contract with it's containing element. -->
<div>
	<img class="img-tn-flex" src="/img/photo.jpg">
</div>