Fit Bild auf p-galleria primeNg für Angular2 Anwendung

Question

I verwendet p_galleria von PrimeNg und setzen diese Attribute:

<p-galleria [images]="productImages" 
    panelWidth="560" 
    panelHeight="313" 
    autoPlay="false" 
    showFilmstrip="false" 
    id="product-galley" 
    showCaption="false"> 
</p-galleria> 

auch einen Stil für gerenderten Bild Panel I hinzugefügt:

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

Aber das Bild ist immer im Container gespannt, ich möchte es im Maßstab fixieren. und in der Mitte der Platte sein.

Gibt es eine Idee, wie man den Stil ändert?

Vielleicht ist es nicht relevant, aber ich wickelte diese Galerie in einem Bootstrap-modal.

Answer 1

<div class="col-md-5"> 
<p-galleria [images]="imagesGaleria" 
      styleClass="completa" 
      [showFilmstrip]="false" 
      [showCaption]="false" 
      effectDuration=2000></p-galleria> 

Und mein css, gibt es einige Eigenschaften, die Sie entfernen können

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