Add scaling of full image view depending on aspect ratio

Signed-off-by: trivernis <trivernis@protonmail.com>
pull/4/head
trivernis 3 years ago
parent fa37c58683
commit e93e75221e

@ -4,11 +4,13 @@
</button> </button>
<div class="file-full-view" fxFlex="80%" <div class="file-full-view" fxFlex="80%"
(dblclick)="this.selectedFile? this.fileDblClickEvent.emit(this.selectedFile.data) : null"> (dblclick)="this.selectedFile? this.fileDblClickEvent.emit(this.selectedFile.data) : null">
<div class="file-full-view-inner"> <div class="file-full-view-inner" #imageContainer>
<div *ngIf="!this.fileContentUrl" class="url-loading-backdrop"> <div *ngIf="!this.fileContentUrl" class="url-loading-backdrop">
<mat-progress-spinner mode="indeterminate" color="primary"></mat-progress-spinner> <mat-progress-spinner mode="indeterminate" color="primary"></mat-progress-spinner>
</div> </div>
<img [src]="this.fileContentUrl" decoding="async" alt="Image"/> <img #fullImage *ngIf="this.fileContentUrl" (load)="this.adjustImageSize(fullImage, imageContainer)" (window:resize)="adjustImageSize(fullImage, imageContainer)"
[class.align-width]="this.scaleWidth" [class.align-height]="!this.scaleWidth"
[src]="this.fileContentUrl" decoding="async" alt="Image"/>
</div> </div>
</div> </div>
<mat-divider fxFlex></mat-divider> <mat-divider fxFlex></mat-divider>

@ -44,6 +44,15 @@ img {
margin: auto; margin: auto;
} }
.align-width {
width: 100%;
height: auto;
}
.align-height {
height: 100%;
width: auto;
}
.close-button { .close-button {
position: absolute; position: absolute;
top: 0; top: 0;

@ -30,6 +30,7 @@ export class FileGalleryComponent implements OnChanges, OnInit {
selectedFile: Selectable<File> | undefined; selectedFile: Selectable<File> | undefined;
fileContentUrl: SafeResourceUrl | undefined; fileContentUrl: SafeResourceUrl | undefined;
scaleWidth = false;
constructor(private fileService: FileService) { constructor(private fileService: FileService) {
} }
@ -131,4 +132,11 @@ export class FileGalleryComponent implements OnChanges, OnInit {
} }
return undefined; return undefined;
} }
public adjustImageSize(fullImage: HTMLImageElement, imageContainer: HTMLDivElement): void {
const containerRatio = imageContainer.clientHeight / imageContainer.clientWidth;
const imageAdjHeight = fullImage.height / containerRatio;
const imageAdjWidth = fullImage.width * containerRatio;
this.scaleWidth = imageAdjWidth > imageAdjHeight;
}
} }

Loading…
Cancel
Save