如何在 ngx-bootstrap 轮播中限制高度而不过度拉伸大屏幕上的宽度

Question

我在下面有这个带有 ngx-bootstrap 旋转木马的 stackblitz。

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

我已将每个 img 标签的最大高度设置为 600px（不希望在大屏幕上的高度大于此值）

它在移动设备上看起来不错，甚至在垂直模式下的 ipad/ipad 专业版上也很好。 但是，一旦我将 ipad 展开为水平或在更大的显示器上全屏查看它，图像的宽度就会开始过度拉伸并且看起来不太好。

有什么方法可以在保持最大高度为 600px 的同时防止像这样拉伸宽度？

Answer 1

我看过旋转木马，在更改 window 宽度后，图像向左移动，在左侧留下白色 space。我添加了一个 100% 的最小宽度和一个对象适合的覆盖物，以防止它被挤压到中心，否则会散开。

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