Responsive image height overflow

[cdalexndr]

While using .img-fluid, if the image height is larger than the container's , then the image can overflow:

Codepen: https://codepen.io/cdalxndr/pen/gORMGPE

Also, it would be nice for the docs should include samples for all types of image sizes:

• width too large
• height too large
• both too small
• both too large

Bootstrap 5.1.0
OS: Win10 19043
Browser: Firefox 90.0

[cdalexndr]

The following seems to fix it:

.img-fluid{
  object-fit:contain;
  height:100%;
}

[mdo]

Implementing something like that might not be the best solution for everyone, so we don't use it by default. Definitely an add-on individual developers and designers should choose to use :).

[cdalexndr]

Seems bad that responsive images are broken by default...

[mdo]

They're not broken by default, they specifically are designed to keep the aspect ratio of an image while preventing it from being too wide. There's no assumption of scaling an image based on a fixed height container. Changing to include additionally properties would potentially break images for everyone else.

[cdalexndr]

Then docs should be changed to reflect this.

From docs: ...responsive behavior (so they never become larger than their parent elements)

From the above statement I understand that a responsive image is expected to not have a height greater than it's parent (larger than their parent ), but this is incorrect as I demonstrated.

Docs should be changed to reflect that only width is taken into account.