将图像拟合在 p-galleria primeNg 上，用于 Angular2 应用

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

但是图像总是在容器中拉伸，我希望它以比例固定。 并位于面板中央。

有没有知道如何改变风格？

也许它不相关，但我把这个画廊包装在一个 引导模式。

Answer 1

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

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

Answer 2

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

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

Answer 3

<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 4

指用户锯编程的近乎完美的答案。代码应包装在

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

Answer 5

我试过这个，它工作正常。

`            .ui-panel-images {
            width: auto;
            height: inherit;
            object-fit: contain;
            position: relative;
        }

'