为 Angular2 应用程序在 p-galleria primeNg 上拟合图像

Posted 2023-03-06

【中文标题】为 Angular2 应用程序在 p-galleria primeNg 上拟合图像

【英文标题】：Fit image on p-galleria primeNg for Angular2 application

【发布时间】：2017-06-17 18:40:26

【问题描述】：

我使用了 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;

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

有没有办法改变样式？

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

【参考方案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;*/

【参考方案2】：

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

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

【参考方案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;

【参考方案4】：

参考用户锯编程的近乎完美的答案。代码应该包含在

中

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

【参考方案5】：

我试过了，效果很好。

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

`