css - 适合 Angular2 应用程序的 p-galleria primeNg 上的图像

Question

我使用了 PrimeNg 的 p_galleria 并设置了这个属性:

<p-galleria [images]="productImages"
   panelWidth="560"
   panelHeight="313"
   autoPlay="false"
   showFilmstrip="false"
   id="product-galley"
   showCaption="false">
</p-galleria>

我还为渲染图像面板添加了样式:

.ui-panel-images {
    /*height: inherit !important;
    width: inherit !important;*/
    /*max-height: inherit !important;
    height: initial;
    max-width: inherit !important;
    width: initial;*/
    max-width: 100%;
    max-height: 100%;
    width:auto;
    height:auto;
}

但是图像总是在容器中拉伸(stretch)，我希望它按比例固定。并位于面板的中心。

有什么想法可以改变样式吗？

Maybe its not relevant, but I wrapped this gallery in a bootstrap-modal.

Answer 1

使用 primeng v6.0.0，我将它添加到我的 CSS 中，使图像自行调整大小，保持纵横比，以匹配 p-galleria 容器的尺寸。

.ui-panel-images {
  width      : 100%;
  height     : 100%;
  object-fit : contain;
}