Angular/HTML - 如何在浏览器中缩小时在 ngx 画廊中保持相同的图像比例？

Question

我正在 Angular 中制作一些东西，我正在使用 ngx 画廊制作图像画廊。我有一个 HTML 应用程序组件，我在主 HTML 组件中使用它。我在浏览器上缩小时遇到大小问题。

这是画廊在缩放前的样子：

这是缩小时的样子（左边的图像看起来被切掉了，而不是被挤压了）：

Angular代码（应用组件中ngx gallery的配置）

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 代码（画廊）

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

HTML代码（主文件，调用app组件的地方）

<div *ngIf="!thingExists" class="content animated pulse ">
  <div class="container-fluid px-4 mb-5">
    <div class="row">
      <div class="col-lg-6 ">
        <div class="text-center">
          <app-carousel [Images]="ImageCarousel" [height]="500" class="m-1"></app-carousel>

        </div>
        <div class="col-lg-6 ">
          <div class="text-center">
            <app-other-thing></app-other-thing>

          </div>

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

问题是，我该如何解决这个问题，这样图像在缩小时不会改变比例？而是保持相同的比例（有点像这样 ngx gallery demo，如果你缩小它们会保持相同的比例）。

Answer 1

OP 在这里，我已经通过将 px 中的 height（即 600）更改为 vh 中的 height（在 Angular 代码部分中）解决了这个问题（我使用了 60vh） .工作得很好。

Angular/HTML - 如何在浏览器中缩小时在 ngx 画廊中保持相同的图像比例？

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

html

css

image

image-gallery

angular