Image Sizing: Requirements

---

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>