How to limit height in a ngx-bootstrap carousel without overly stretching the width on large screens

Question

I have this stackblitz below with an ngx-bootstrap carousel.

https://stackblitz.com/edit/ngx-bootstrap-tuizsh?file=app%2Fapp.component.html

I've set the max-height for each img tag to 600px (don't want the height larger than this on large screens)

It looks fine on mobile and even on ipad/ipad pro in vertical mode. But as soon as I expand an ipad to horizontal or view it on a larger monitor in full screen the image starts to stretch its width too much and doesn't look good.

Is there any way to fix the width from stretching like this while keeping the max-height at 600px?

Answer 1

I've gone seen the carousel and after changing the window width the image moves to the left leaving a white space on the left. I added a min-width of 100% and an object fit of cover to prevent it from being squeezed up to the center but otherwise spread.

img {
  max-height: 600px !important;
  min-width: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center; // You can change this to bottom, right or left depending 
   // on the position you want.
}