Images (Aspect Ratios)

Image Aspect Ratios

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-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% }.

Aspect Ratio Item

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

Aspect Ratio Item Fluid

aspect-ratio-item-fluid sets the max-width to be 100%, similar to img-fluid. If the image is narrower than its container, it won't expand to fill the remaining space. This generally should be used to keep wide images viewable inside the aspect-ratio container.

Original Image

16:9

Aspect Ratio Item Vertical Fluid

aspect-ratio-item-vertical-fluid sets the max-height to be 100%. If the image is shorter than its container, it won't expand to fill the remaining space. This generally should be used to keep tall images viewable inside the aspect-ratio container.

Aspect Ratio Item Flush

aspect-ratio-item-flush forces the width to be 100.6%. This utility should generally be used for images that are too narrow when using aspect-ratio-item-fluid and you still want to fill the remaining space.

Aspect Ratio Item Vertical Flush

aspect-ratio-item-vertical-flush forces the height to be 100.6%. This utility should generally be used for images that are too short when using aspect-ratio-item-flush and you still want to fill the remaining space.

Aspect Ratio Item Helper Classes

Aspect Ratio Background Images