From de6815180cbda648b9b52dffaa3baf1b04d59005 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Tue, 23 Nov 2021 13:35:08 +0100
Subject: [PATCH] Fix image positioning of image component
- Don't use height 100%. The image is not centered but positioned
in the upper left corner
---
projects/common/element-components/image.component.ts | 10 +++++-----
1 file changed, 5 insertions(+), 5 deletions(-)
diff --git a/projects/common/element-components/image.component.ts b/projects/common/element-components/image.component.ts
index f89974632..7d56bb792 100644
--- a/projects/common/element-components/image.component.ts
+++ b/projects/common/element-components/image.component.ts
@@ -8,12 +8,13 @@ import { ValueChangeElement } from '../models/uI-element';
@Component({
selector: 'app-image',
template: `
- <div [style.height.%]="100"
- [style.width.%]="100"
+ <!-- Display Flex ensures that the image container is centered and
+ that image and magnifier are displayed properly.-->
+ <div [style.width.%]="100"
+ class="image-container"
(mouseover)="magnifierVisible = true"
(mouseenter)="magnifierVisible = true"
(mouseleave)="magnifierVisible = false">
- <div class="image-container">
<img #image
[src]="elementModel.src | safeResourceUrl"
[alt]="'imageNotFound' | translate"
@@ -27,10 +28,9 @@ import { ValueChangeElement } from '../models/uI-element';
(elementValueChanged)="elementValueChanged.emit($event)">
</app-magnifier>
</div>
- </div>
`,
styles: [
- '.image-container{ width: fit-content; height: fit-content; margin: auto; position: relative }',
+ '.image-container{ position: relative }',
'.dynamic-image{ width: 100%; height: fit-content }',
'.static-image{ width: 100%; height: 100%; object-fit: contain }'
]
--
GitLab