Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
K
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Aspect Ratio

  • Aspect Ratio
    • Sass API
    • Bg Contain
    • Bg Cover
    • Bg Center
  • Aspect Ratio Item
    • Fluid
    • Vertical Fluid
    • Flush
    • Vertical Flush
    • Center Middle
    • Top Center
    • Top Right
    • Right Middle
    • Bottom Right
    • Bottom Center
    • Bottom Left
    • Left Middle

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
Copied!
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).

Copied!
Code Sample (expand to see it)
$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:

Copied!
Code Sample (expand to see it)
.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.

Copied!
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.

Copied!
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.

Copied!
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.

thumbnail
Copied!
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
thumbnail of a hot air balloon
16:9
thumbnail
1:1
thumbnail
3:2
thumbnail
4:3
thumbnail
8:3
thumbnail
8:5
thumbnail
16:9
thumbnail
Copied!
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
thumbnail
3:2
thumbnail
4:3
thumbnail
8:3
thumbnail
8:5
thumbnail
16:9
thumbnail
Copied!
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
thumbnail
16:9
thumbnail
Copied!
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
thumbnail
16:9
thumbnail
Copied!
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.

thumbnail
Copied!
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.

thumbnail
Copied!
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.

thumbnail
Copied!
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.

thumbnail
Copied!
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.

thumbnail
Copied!
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.

thumbnail
Copied!
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.

thumbnail
Copied!
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.

thumbnail
Copied!
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>

How can this be improved? Create an issue!