适配图像到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中。

- Sara N

Answer 1

使用primeng v6.0.0，我在我的CSS中添加了以下内容，使图像自适应地缩放，保持纵横比，以匹配p-galleria容器的尺寸。

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

- sawprogramming

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>

为了使object-fit起作用，我必须像这样覆盖视图封装：

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

- Chris

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

- Angel Ferrando

Answer 4

以上的方法对我都不起作用。而且，关闭按钮有点小问题——它决定躲在图片后面玩捉迷藏，让关闭图片变得棘手。这是我修复它的方法（只是一个小技巧）：

// prime ng galleria bugs fix
::ng-deep .p-galleria-thumbnail-items.p-items-hidden .p-galleria-thumbnail-item {
  visibility: visible;
}

::ng-deep p-galleriacontent {
  width: 100%
}

::ng-deep p-galleriaitem img {
  width: fit-content;
  height: 80vh;
}

::ng-deep .p-button-label {
  white-space: nowrap;
}

::ng-deep .p-galleria-close {
  z-index: 100002;
}

- Theolitic

Answer 5

我尝试过这个，它运行得很好。

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

`

- Viraj Sandaruwan

Answer 6

参考用户sawprogramming的几乎完美的答案。代码应该被包裹在

中。

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

- IHaveHandedInMyResignation