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

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

字符串

前面的解决方案都不适合我。我的响应式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;
}

型

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

型

以上都不适用于我.此外，有一个小打嗝与关闭按钮-它决定玩捉迷藏背后的图片，使它棘手的关闭图片.这是我如何修复它（只是一个黑客）：

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

字符串

参考用户sawprogramming的近乎完美的答案。代码应 Package 在

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

字符串

我试过这个，它工作得很好。

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

字符串
`