Angular/HTML-如何在瀏覽器中縮小時在ngx畫廊中保持相同的影像比例？

我正在 Angular 中制作一些東西，我正在使用 ngx 庫來制作影像庫。我有一個在主要 HTML 組件中使用的 HTML 應用程式組件。當我縮小瀏覽器時，我遇到了大小問題。

這是畫廊在縮放之前的樣子：

這就是縮小時的樣子（左邊的影像看起來被剪掉了，而不是被擠壓了）：

Angular 代碼（應用組件中 ngx 庫的配置）

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 代碼（主檔案，應用程式組件被呼叫的地方）

<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 畫廊演示，如果你縮小它們保持相同的比例）。

uj5u.com熱心網友回復：

在這里，我已經通過將heightpx（即 600）中的（在 Angular 代碼部分中）更改height為 vh 中（我使用了 60vh）解決了這個問題。像魅力一樣作業。

標籤：html css 有角度的 图片 图片库

上一篇：使用事件偵聽器單擊時更改ImgSrc

下一篇：HTML影像未顯示原因