Angular/HTML - How to keep the same image proportions in an ngx gallery while zooming out in the bro-CodePudding

I'm making something in Angular and I was using the ngx gallery to make a gallery of images. I have an HTML app component that I use in a main HTML component. I have an issue of size when I zoom out on the browser.

This is what the gallery looks like before the zoom:

And this is what it looks like when zooming out (the images on the left look cut out, rather than squeezed):

Angular code (configuration of the ngx gallery in the app component)

export class CarouselComponent implements OnInit {  
 @Input() Images:Array<any> = [];   @Input() height:number =600;  
 galleryOptions: NgxGalleryOptions[];   galleryImages:
 NgxGalleryImage[] =[];
 
   constructor() {
 
    }
 
   ngOnInit(): void {
 
     this.galleryOptions = [
       {
 
         thumbnailsColumns: 6,
         imageAnimation: NgxGalleryAnimation.Zoom,
         width: '80%',
         height:this.height.toString()   "px",
         lazyLoading:true,
         imageInfinityMove:true,
         imageSize:NgxGalleryImageSize.Cover,
         thumbnailsPercent: 20,
         thumbnailsMargin: 20,
         previewCloseOnClick:true,
         previewCloseOnEsc:true,
         preview: true,
         previewZoom:true ,
         previewAutoPlayPauseOnHover :true,
         previewInfinityMove:true,
         arrowPrevIcon : "fa fa-arrow-circle-left ",
         arrowNextIcon : "fa fa-arrow-circle-right "
 
       },
         // max-width 1200
         {
           breakpoint: 1200,
           width: '100%',
           imagePercent: 80,
           height:"250px",
           imageSize:NgxGalleryImageSize.Contain,
           thumbnailsPercent: 20,
           thumbnailsMargin: 20,
           thumbnailMargin: 20,
           thumbnails:false,
           preview: false,
         },
       // max-width 800
       {
         breakpoint: 800,
         width: '100%',
         imagePercent: 80,
         height:(this.height/2).toString() "px",
         imageSize:NgxGalleryImageSize.Contain,
         thumbnailsPercent: 20,
         thumbnailsMargin: 20,
         thumbnailMargin: 20,
         thumbnails:false,
         preview: false,
       },
       // max-width 400
       {
         breakpoint: 400,
         height:(this.height/3).toString() "px",
         imageSize:NgxGalleryImageSize.Contain,
         preview: false,
         thumbnails:false,
       }
     ];
 
   }
 
   ngOnChanges(){
     this.galleryImages= [];
     this.fillGallery(this.Images)
 
   }
 
 fillGallery( ArrayOfPhotos:Array<any>){
    for(let i = 0 ; i<ArrayOfPhotos.length;i  ){
     this.galleryImages[i] =
       {
         small: ArrayOfPhotos[i].URL,
         medium: ArrayOfPhotos[i].URL,
         big: ArrayOfPhotos[i].URL
       };   }
 }

HTML code (of gallery)

 <ngx-gallery #gallery  [options]="galleryOptions"
 [images]="galleryImages" ></ngx-gallery>

HTML code (main file, where the app component is called)

<div *ngIf="!thingExists" >
  <div >
    <div >
      <div >
        <div >
          <app-carousel [Images]="ImageCarousel" [height]="500" ></app-carousel>

        </div>
        <div >
          <div >
            <app-other-thing></app-other-thing>

          </div>

        </div>
      </div>
    </div>
  </div>
</div>

The question is, how can I fix this so the images don't change proportions when zooming out? But rather keep the same proportions (sort of like this ngx gallery demo, if you zoom out they stay the same proportion).

CodePudding user response：

OP here, I solved this already by changing (in the Angular code section) height in px (which is 600) to height in vh (I used 60vh). Worked like a charm.