Image Utilities
Various utilities for manipulating images within component and page templates.
Responsive images
Images in Bootstrap are made responsive with .img-fluid. This applies max-width: 100%; and height: auto; to the image so that it scales with the parent width.
<img
srcset="../../../../assets/img//fpo/fpo-8-5@xs.jpg 480w,
../../../../assets/img//fpo/fpo-8-5@md.jpg 720w,
../../../../assets/img//fpo/fpo-8-5@lg.jpg 960w,
../../../../assets/img//fpo/fpo-8-5@xl.jpg 1440w"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,
(max-width: 992px) 960px,
1200px"
src="../../../../assets/img//fpo/fpo-8-5@md.jpg"
alt="..."
class="img-fluid"
>
Aspect Ratio Images
Maintaining a consistent width-to-height ratio, called an aspect ratio, is critical in responsive web design and for preventing cumulative layout shift. You can force the aspect ratio of an image by using the img-ar*-* utility classes.
Available values:
.img-ar1-1- Forces 1:1 aspect ratio.img-ar4-5- Forces 4:5 aspect ratio.img-ar5-4- Forces 5:4 aspect ratio.img-ar5-8- Forces 5:8 aspect ratio.img-ar8-5- Forces 8:5 aspect ratio.img-ar3-2- Forces 3:2 aspect ratio.img-ar16-9- Forces 16:9 aspect ratio.img-ar21-9- Forces 21:9 aspect ratio
<div class="container-fluid">
<div class="row row-cols-4">
<div class="col">
<figure class="figure">
<img
srcset="../../../../assets/img/ 480w,
../../../../assets/img//ui-framework/konsoka-bg-02.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//ui-framework/konsoka-bg-02.jpg"
alt="..."
class="img-ar1-1"
>
<figcaption class="figure-caption">.img-ar1-1</figcaption>
</figure>
</div>
<div class="col">
<figure class="figure">
<img
srcset="../../../../assets/img/ 480w,
../../../../assets/img//ui-framework/konsoka-bg-02.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//ui-framework/konsoka-bg-02.jpg"
alt="..."
class="img-ar4-5"
>
<figcaption class="figure-caption">.img-ar4-5</figcaption>
</figure>
</div>
<div class="col">
<figure class="figure">
<img
srcset="../../../../assets/img/ 480w,
../../../../assets/img//ui-framework/konsoka-bg-02.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//ui-framework/konsoka-bg-02.jpg"
alt="..."
class="img-ar5-4"
>
<figcaption class="figure-caption">.img-ar5-4</figcaption>
</figure>
</div>
<div class="col">
<figure class="figure">
<img
srcset="../../../../assets/img/ 480w,
../../../../assets/img//ui-framework/konsoka-bg-02.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//ui-framework/konsoka-bg-02.jpg"
alt="..."
class="img-ar5-8"
>
<figcaption class="figure-caption">.img-ar5-8</figcaption>
</figure>
</div>
<div class="col">
<figure class="figure">
<img
srcset="../../../../assets/img/ 480w,
../../../../assets/img//ui-framework/konsoka-bg-02.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//ui-framework/konsoka-bg-02.jpg"
alt="..."
class="img-ar8-5"
>
<figcaption class="figure-caption">.img-ar8-5</figcaption>
</figure>
</div>
<div class="col">
<figure class="figure">
<img
srcset="../../../../assets/img/ 480w,
../../../../assets/img//ui-framework/konsoka-bg-02.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//ui-framework/konsoka-bg-02.jpg"
alt="..."
class="img-ar3-2"
>
<figcaption class="figure-caption">.img-ar3-2</figcaption>
</figure>
</div>
<div class="col">
<figure class="figure">
<img
srcset="../../../../assets/img/ 480w,
../../../../assets/img//ui-framework/konsoka-bg-02.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//ui-framework/konsoka-bg-02.jpg"
alt="..."
class="img-ar16-9"
>
<figcaption class="figure-caption">.img-ar16-9</figcaption>
</figure>
</div>
<div class="col">
<figure class="figure">
<img
srcset="../../../../assets/img/ 480w,
../../../../assets/img//ui-framework/konsoka-bg-02.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//ui-framework/konsoka-bg-02.jpg"
alt="..."
class="img-ar21-9"
>
<figcaption class="figure-caption">.img-ar21-9</figcaption>
</figure>
</div>
</div>
</div>
Object Fit Images
The object-fit utilities set how the content of a replaced element, such as an <img> or <video>, should be resized to fit its parent container.
You can alter the alignment of the replaced element's content object within the element's box using the obj-pos-* utility classes.
<img
srcset="..."
sizes="..."
src="..."
alt="..."
class="img-fit obj-pos-cc"
>
<img
srcset="..."
sizes="..."
src="..."
alt="..."
class="img-fit obj-pos-bc"
>
<img
srcset="..."
sizes="..."
src="..."
alt="..."
class="img-fit obj-pos-lc"
>
<img
srcset="..."
sizes="..."
src="..."
alt="..."
class="img-fit obj-pos-rc"
>
<img
srcset="..."
sizes="..."
src="..."
alt="..."
class="img-fit obj-pos-br"
>
<img
srcset="..."
sizes="..."
src="..."
alt="..."
class="img-fit obj-pos-bl"
>
<img
srcset="..."
sizes="..."
src="..."
alt="..."
class="img-fit obj-pos-tc"
>
<img
srcset="..."
sizes="..."
src="..."
alt="..."
class="img-fit obj-pos-tr"
>
<img
srcset="..."
sizes="..."
src="..."
alt="..."
class="img-fit obj-pos-tl"
>