如何在 ngx-bootstrap 輪播中限制高度而不過度拉伸大屏幕上的寬度

Question

我在下面有一個帶有 ngx-bootstrap 輪播的 stackblitz。

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

我已將每個 img 標簽的最大高度設置為 600 像素（不希望在大屏幕上大於此高度）

它在移動設備上甚至在垂直模式下的 ipad/ipad pro 上看起來都很好。 但是，一旦我將 ipad 擴展到水平或在更大的顯示器上全屏查看它，圖像就會開始過度拉伸其寬度並且看起來不太好。

有什么方法可以在將最大高度保持在 600px 的同時固定寬度這樣的拉伸？

Answer 1

我已經看到了旋轉木馬，在更改了 window 寬度后，圖像向左移動，在左側留下一個空白區域。 我添加了一個 100% 的最小寬度和一個 object 蓋板，以防止它被擠壓到中心但否則會擴散。

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