Aspect Ratio
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
<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 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.
<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.
<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.
<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.
<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
<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
<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%.
16:9
16:9
<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%.
16:9
16:9
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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>