适用于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;
}

但是图像总是在容器中拉伸，我希望它能够按比例固定。并在面板的中心。

有什么想法改变风格吗？

也许它不相关，但我把这个画廊包裹在一个bootstrap-modal中。

Answer 1

<div class="col-md-5">
<p-galleria [images]="imagesGaleria"
            styleClass="completa"
            [showFilmstrip]="false"
            [showCaption]="false"
            effectDuration=2000></p-galleria>

我的css，你可以删除一些属性

.completa { 
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background-size: cover;} 


.ui-panel-images{
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
/*z-index: -100;*/
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
/*background-size: cover;*/}

Answer 2

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

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

Answer 3

以前的解决方案都不适合我。我对响应式广告牌面板的解决方案是调整响应式容器元素的大小，并使面板属性适合容器：

<div #container>
  <p-galleria [panelWidth]="container.offsetWidth" 
  [panelHeight]="container.offsetHeight" 
  [images]="images"></p-galleria>
</div>

在我的情况下，特别有用的是将容器设置为100％宽度，并计算纵横比以匹配我的图像。注意，您不需要在此方法中设置容器高度。或者，如果您要显示幻灯片，则可以添加更多高度：

<div #container>
  <p-galleria [panelWidth]="container.offsetWidth" 
  [panelHeight]="container.offsetWidth * (5/16)"
  [images]="images" [showFilmstrip]="false"></p-galleria>
</div>

为了使对象适合工作，我不得不重写视图封装，如下所示：

:host ::ng-deep img.ui-panel-images {
  object-fit: contain !important;
  height: inherit;
  width: inherit;
}