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

【问题标题】：Fit image on p-galleria primeNg for Angular2 application为 Angular2 应用程序在 p-galleria primeNg 上拟合图像
【发布时间】：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;
}

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

有没有办法改变样式？

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

【问题讨论】：

标签： css image angular fixed primeng

【解决方案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;
        }

`

【讨论】：