[player] Improve scaling of images and button images

projects/common/assets/i18n/de.json

@@ -7,5 +7,6 @@
     "inputTooShort": "Eingabe zu kurz",
     "inputTooLong": "Eingabe zu lang",
     "wrongPattern": "Eingabe enthält falsche Zeichen"
-  }
+  },
+  "imageNotFound": "Bild nicht gefunden"
 }

projects/common/element-components/button.component.ts

@@ -22,12 +22,16 @@ import { ButtonElement } from '../models/button-element';
               [style.border-radius.px]="elementModel.borderRadius">
         {{elementModel.label}}
       </button>
-      <input *ngIf="elementModel.imageSrc" type="image" [src]="elementModel.imageSrc"
-             [style.width.%]="100"
-             [style.height.%]="100"
-             [style.object-fit]="'contain'" alt="Bild nicht gefunden">
+      <input *ngIf="elementModel.imageSrc" type="image"
+             [src]="elementModel.imageSrc | safeResourceUrl"
+             [class]="elementModel.dynamicPositioning? 'dynamic-image' : 'static-image'"
+             [alt]="'imageNotFound' | translate">
     </div>
-  `
+  `,
+  styles: [
+    '.dynamic-image{width: 100%; height: fit-content}',
+    '.static-image{ width: 100%; height: 100%; object-fit: contain}'
+  ]
 })
 export class ButtonComponent extends ElementComponent {
   @Output() onFocusin = new EventEmitter();

projects/common/element-components/image.component.ts

@@ -9,12 +9,14 @@ import { ImageElement } from '../models/image-element';
          [style.height.%]="100"
          [style.width.%]="100">
       <img [src]="elementModel.src | safeResourceUrl"
-           alt="Image Placeholder"
-           [style.object-fit]="'contain'"
-           [style.height.%]="100"
-           [style.width.%]="100">
+           [alt]="'imageNotFound' | translate"
+           [class]="elementModel.dynamicPositioning? 'dynamic-image' : 'static-image'">
     </div>
-  `
+  `,
+  styles: [
+    '.dynamic-image{width: 100%; height: fit-content}',
+    '.static-image{ width: 100%; height: 100%; object-fit: contain}'
+  ]
 })
 export class ImageComponent extends ElementComponent {
   elementModel!: ImageElement;