Image Utilities

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 class="img-fluid" src="../../../../assets/img/fpo/fpo-16-9.jpg" alt="...">
  
      
    

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-ar3-2 - Forces 3:2 aspect ratio
• .img-ar16-9 - Forces 16:9 aspect ratio

      
        <img class="img-ar16-9" src="../../../../assets/img/fpo/fpo-16-9.jpg" alt="...">
  
      
    

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 class="img-fit obj-pos-cc" src="..." alt="...">
  <img class="img-fit obj-pos-bc" src="..." alt="...">
  <img class="img-fit obj-pos-lc" src="..." alt="...">
  <img class="img-fit obj-pos-rc" src="..." alt="...">
  <img class="img-fit obj-pos-br" src="..." alt="...">
  <img class="img-fit obj-pos-bl" src="..." alt="...">
  <img class="img-fit obj-pos-tc" src="..." alt="...">
  <img class="img-fit obj-pos-tr" src="..." alt="...">
  <img class="img-fit obj-pos-tl" src="..." alt="...">