From c5cbaa5baaa8b7c30463f7e79ccb45de93dd015a Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Fri, 3 Dec 2021 12:38:36 +0100
Subject: [PATCH] Fix image scaling for radio-image element
Image are supposed to scale down when needed. This is done via
max-width.
Small image shall not scale up, which is done with
object-fit=scale-down.
---
.../radio-with-images/radio-group-images.component.ts | 6 +++++-
1 file changed, 5 insertions(+), 1 deletion(-)
diff --git a/projects/common/ui-elements/radio-with-images/radio-group-images.component.ts b/projects/common/ui-elements/radio-with-images/radio-group-images.component.ts
index bfa521653..7bc4d3250 100644
--- a/projects/common/ui-elements/radio-with-images/radio-group-images.component.ts
+++ b/projects/common/ui-elements/radio-with-images/radio-group-images.component.ts
@@ -24,16 +24,20 @@ import { FormElementComponent } from '../../directives/form-element-component.di
[innerHTML]="elementModel.label">
</label>
<div *ngFor="let option of elementModel.columns; let i = index"
- class="columns" fxLayout="column"
+ class="columns" fxLayout="column" fxLayoutAlign="center center"
[style.grid-column-start]="1 + i"
[style.grid-column-end]="2 + i"
[style.grid-row-start]="2"
[style.grid-row-end]="3"
(click)="selectOption(i)">
<img *ngIf="option.imgSrc && option.position === 'above'"
+ [style.object-fit]="'scale-down'"
+ [style.max-width.%]="100"
[src]="option.imgSrc | safeResourceUrl" alt="Image Placeholder">
<div>{{option.text}}</div>
<img *ngIf="option.imgSrc && option.position === 'below'"
+ [style.object-fit]="'scale-down'"
+ [style.max-width.%]="100"
[src]="option.imgSrc | safeResourceUrl" alt="Image Placeholder">
</div>
<mat-radio-group aria-labelledby="radio-group-label"
--
GitLab