我使用了p_galleria of prime并设置了以下属性:

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

但图像总是在容器中拉伸,我希望它在比例上固定。在面板中央。
有什么办法改变风格吗?
也许与此无关,但我把这个画廊包装成
引导模式。

最佳答案

使用PrimingV6.0.0,我将其添加到我的CSS中,使图像在保持纵横比的情况下自行调整大小,以匹配P-galleria容器的尺寸。

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

07-28 02:55
查看更多