Aspect Ratio

Aspect Ratio
Aspect Ratio Item

Aspect Ratio

Sometimes you can't control the size of an image, you can constrain your images with aspect-ratios. The base class aspect-ratio maintains a 1 to 1 ratio relative to its container's width.

Use aspect-ratio-3-to-2, aspect-ratio-4-to-3, aspect-ratio-8-to-3, aspect-ratio-8-to-5, or aspect-ratio-16-to-9 to maintain the specific ratio relative to its container or create your own by setting padding-bottom to the ratio you want e.g. 2 to 1 .aspect-ratio-2-to-1 { padding-bottom: 50% }.

1:1

3:2

4:3

8:3

8:5

16:9

Code Sample (expand to see it)

<div class="aspect-ratio"></div>
<div class="aspect-ratio aspect-ratio-3-to-2"></div>
<div class="aspect-ratio aspect-ratio-4-to-3"></div>
<div class="aspect-ratio aspect-ratio-8-to-3"></div>
<div class="aspect-ratio aspect-ratio-8-to-5"></div>
<div class="aspect-ratio aspect-ratio-16-to-9"></div>

Aspect Ratio Sass API

The map $aspect-ratio-sizes allows generating any number of aspect ratio variants. If a key starts with ., #, or '%' Clay will output it as is, otherwise we will prepend . to the key (e.g., .aspect-ratio-16-to-9). It will also generate a Sass placeholder prefixed by % (e.g., %aspect-ratio-16-to-9).

$aspect-ratio-sizes: (
    aspect-ratio-16-to-9: (
        height: 9,
        width: 16,
    ),
    '.card .aspect-ratio': (
        extend: '%aspect-ratio-16-to-9',
    ),
    '%aspect-ratio-4-to-1': (
        height: 1,
        width: 4,
    ),
    '.aspect-ratio-4-to-1': (
        extend: '%aspect-ratio-4-to-1',
    ),
);

Outputs:

.aspect-ratio-16-to-9, .card .aspect-ratio {
    padding-bottom: calc(9 / 16 * 100%);
}

.aspect-ratio-4-to-1 {
    padding-bottom: calc(1 / 4 * 100%);
}

Aspect Ratio Bg Contain

The class aspect-ratio-bg-contain on aspect-ratio centers the background-image and scales the image as large as possible without cropping or stretching the image.

Code Sample (expand to see it)

<div
	class="aspect-ratio aspect-ratio-16-to-9 aspect-ratio-bg-contain"
	style="background-image: url(/images/thumbnail_hot_air_ballon.jpg);"
></div>

Aspect Ratio Bg Cover

The class aspect-ratio-bg-cover on aspect-ratio centers the background-image and scales the image to fill the container. It will stretch and change the proportions of the image to achieve this.

Code Sample (expand to see it)

<div
	class="aspect-ratio aspect-ratio-16-to-9 aspect-ratio-bg-cover bg-light"
	style="background-image: url(/images/thumbnail_hot_air_ballon.jpg);"
></div>

Aspect Ratio Bg Center

The class aspect-ratio-bg-center on aspect-ratio will center the background-image.

Code Sample (expand to see it)

<div
	class="aspect-ratio aspect-ratio-16-to-9 aspect-ratio-bg-center"
	style="background-image: url(/images/liferay_logo_tagline.png);"
></div>

Aspect Ratio Item

Use aspect-ratio-item on the nested img if you want to keep the content's original size and crop the visible area.

Code Sample (expand to see it)

<div class="aspect-ratio aspect-ratio-4-to-3">
	<img
		alt="thumbnail"
		class=" aspect-ratio-item"
		src="/images/thumbnail_hot_air_ballon.jpg"
	/>
</div>

Aspect Ratio Item Fluid

The class aspect-ratio-item-fluid should be used on aspect-ratio-item to keep wide images viewable inside the aspect-ratio container. It sets the max-width to be 100%, similar to img-fluid.

Original Image

16:9

1:1

3:2

4:3

8:3

8:5

16:9

Code Sample (expand to see it)

<div class="aspect-ratio aspect-ratio-16-to-9">
	<img
		alt="thumbnail"
		class="aspect-ratio-item aspect-ratio-item-fluid"
		src="/images/thumbnail_hot_air_ballon.jpg"
	/>
</div>
<div class="aspect-ratio">
	<img
		alt="thumbnail"
		class="aspect-ratio-item aspect-ratio-item-fluid"
		src="/images/thumbnail_hot_air_ballon.jpg"
	/>
</div>
<div class="aspect-ratio aspect-ratio-3-to-2">
	<img
		alt="thumbnail"
		class="aspect-ratio-item aspect-ratio-item-fluid"
		src="/images/thumbnail_hot_air_ballon.jpg"
	/>
</div>
<div class="aspect-ratio aspect-ratio-4-to-3">
	<img
		alt="thumbnail"
		class="aspect-ratio-item aspect-ratio-item-fluid"
		src="/images/thumbnail_hot_air_ballon.jpg"
	/>
</div>
<div class="aspect-ratio aspect-ratio-8-to-3">
	<img
		alt="thumbnail"
		class="aspect-ratio-item aspect-ratio-item-fluid"
		src="/images/thumbnail_hot_air_ballon.jpg"
	/>
</div>
<div class="aspect-ratio aspect-ratio-8-to-5">
	<img
		alt="thumbnail"
		class="aspect-ratio-item aspect-ratio-item-fluid"
		src="/images/thumbnail_hot_air_ballon.jpg"
	/>
</div>
<div class="aspect-ratio aspect-ratio-16-to-9">
	<img
		alt="thumbnail"
		class="aspect-ratio-item aspect-ratio-item-fluid"
		src="/images/thumbnail_hot_air_ballon.jpg"
	/>
</div>

Aspect Ratio Item Vertical Fluid

The class aspect-ratio-item-vertical-fluid should be used on aspect-ratio-item to keep tall images viewable inside the aspect-ratio container. It sets the max-height to be 100%.

1:1

3:2

4:3

8:3

8:5

16:9

Code Sample (expand to see it)

<div class="aspect-ratio">
	<img
		alt="thumbnail"
		class="aspect-ratio-item aspect-ratio-item-vertical-fluid"
		src="/images/long_user_image.png"
	/>
</div>
<div class="aspect-ratio aspect-ratio-3-to-2">
	<img
		alt="thumbnail"
		class="aspect-ratio-item aspect-ratio-item-vertical-fluid"
		src="/images/long_user_image.png"
	/>
</div>
<div class="aspect-ratio aspect-ratio-4-to-3">
	<img
		alt="thumbnail"
		class="aspect-ratio-item aspect-ratio-item-vertical-fluid"
		src="/images/long_user_image.png"
	/>
</div>
<div class="aspect-ratio aspect-ratio-8-to-3">
	<img
		alt="thumbnail"
		class="aspect-ratio-item aspect-ratio-item-vertical-fluid"
		src="/images/long_user_image.png"
	/>
</div>
<div class="aspect-ratio aspect-ratio-8-to-5">
	<img
		alt="thumbnail"
		class="aspect-ratio-item aspect-ratio-item-vertical-fluid"
		src="/images/long_user_image.png"
	/>
</div>
<div class="aspect-ratio aspect-ratio-16-to-9">
	<img
		alt="thumbnail"
		class="aspect-ratio-item aspect-ratio-item-vertical-fluid"
		src="/images/long_user_image.png"
	/>
</div>

Aspect Ratio Item Flush

The class aspect-ratio-item-flush should be used for images that are too narrow and want it to fill the remaining space. It forces the width to be 100.6%.

The 100.6% width is to account for browser subpixel rendering issues.

16:9

Code Sample (expand to see it)

<div class="aspect-ratio aspect-ratio-16-to-9">
	<img
		alt="thumbnail"
		class="aspect-ratio-item aspect-ratio-item-center-middle aspect-ratio-item-flush"
		src="/images/thumbnail_hot_air_ballon.jpg"
	/>
</div>
<div class="aspect-ratio aspect-ratio-16-to-9">
	<img
		alt="thumbnail"
		class="aspect-ratio-item aspect-ratio-item-center-middle aspect-ratio-item-flush"
		src="/images/liferay_logo_tagline.png"
	/>
</div>

Aspect Ratio Item Vertical Flush

The class aspect-ratio-item-vertical-flush should be used for images that are too short and want it to fill the remaining vertical space. It forces the height to be 100.6%.

The 100.6% height is to account for browser subpixel rendering issues.

16:9

Code Sample (expand to see it)

<div class="aspect-ratio aspect-ratio-16-to-9 bg-light">
	<img
		alt="thumbnail"
		class="aspect-ratio-item aspect-ratio-item-center-middle aspect-ratio-item-vertical-flush"
		src="/images/thumbnail_graph2.png"
	/>
</div>
<div class="aspect-ratio aspect-ratio-16-to-9 bg-light">
	<img
		alt="thumbnail"
		class="aspect-ratio-item aspect-ratio-item-center-middle aspect-ratio-item-vertical-flush"
		src="/images/liferay_logo_tagline.png"
	/>
</div>

Aspect Ratio Item Center Middle

The class aspect-ratio-item-center-middle centers an item horizontally and vertically.

Code Sample (expand to see it)

<div class="aspect-ratio aspect-ratio-16-to-9">
	<img
		alt="thumbnail"
		class="aspect-ratio-item aspect-ratio-item-center-middle aspect-ratio-item-fluid"
		src="/images/liferay_logo_tagline.png"
	/>
</div>

Aspect Ratio Item Top Center

The class aspect-ratio-item-top-center vertically aligns the item at the top and centers it horizontally.

Code Sample (expand to see it)

<div class="aspect-ratio aspect-ratio-16-to-9">
	<img
		alt="thumbnail"
		class="aspect-ratio-item aspect-ratio-item-top-center aspect-ratio-item-fluid"
		src="/images/liferay_logo_tagline.png"
	/>
</div>

Aspect Ratio Item Top Right

The class aspect-ratio-item-top-right aligns the item at the top right corner.

Code Sample (expand to see it)

<div class="aspect-ratio aspect-ratio-16-to-9">
	<img
		alt="thumbnail"
		class="aspect-ratio-item aspect-ratio-item-fluid aspect-ratio-item-top-right"
		src="/images/liferay_logo_tagline.png"
	/>
</div>

Aspect Ratio Item Right Middle

The class aspect-ratio-item-right-middle aligns an item in the middle vertically and right side horizontally.

Code Sample (expand to see it)

<div class="aspect-ratio aspect-ratio-16-to-9">
	<img
		alt="thumbnail"
		class="aspect-ratio-item aspect-ratio-item-fluid aspect-ratio-item-right-middle"
		src="/images/liferay_logo_tagline.png"
	/>
</div>

Aspect Ratio Item Bottom Right

The class aspect-ratio-item-bottom-right aligns an item at the bottom right corner.

Code Sample (expand to see it)

<div class="aspect-ratio aspect-ratio-16-to-9">
	<img
		alt="thumbnail"
		class="aspect-ratio-item aspect-ratio-item-bottom-right aspect-ratio-item-fluid"
		src="/images/liferay_logo_tagline.png"
	/>
</div>

Aspect Ratio Item Bottom Center

The class aspect-ratio-item-bottom-center aligns an item at the bottom vertically and centers it horizontally.

Code Sample (expand to see it)

<div class="aspect-ratio aspect-ratio-16-to-9">
	<img
		alt="thumbnail"
		class="aspect-ratio-item aspect-ratio-item-bottom-center aspect-ratio-item-fluid"
		src="/images/liferay_logo_tagline.png"
	/>
</div>

Aspect Ratio Item Bottom Left

The class aspect-ratio-item-bottom-left aligns an item at the bottom left corner.

Code Sample (expand to see it)

<div class="aspect-ratio aspect-ratio-16-to-9">
	<img
		alt="thumbnail"
		class="aspect-ratio-item aspect-ratio-item-bottom-left aspect-ratio-item-fluid"
		src="/images/liferay_logo_tagline.png"
	/>
</div>

Aspect Ratio Item Left Middle

The class aspect-ratio-item-left-middle aligns an item on the left horizontally and in the middle vertically.

Code Sample (expand to see it)

<div class="aspect-ratio aspect-ratio-16-to-9">
	<img
		alt="thumbnail"
		class="aspect-ratio-item aspect-ratio-item-left-middle aspect-ratio-item-fluid"
		src="/images/liferay_logo_tagline.png"
	/>
</div>