fix(sbb-image): introduce css property to configure object-fit

src/elements/image/image.scss

@@ -10,6 +10,7 @@
     --sbb-disable-animation-zero-time,
     var(--sbb-animation-duration-4x)
   );
+  --sbb-image-object-fit: cover;
 
   display: block;
 }
@@ -105,7 +106,7 @@
 :is(.sbb-image__img, .sbb-image__blurred) {
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: var(--sbb-image-object-fit);
   object-position: var(--sbb-image-object-position);
   transition: opacity var(--sbb-image-animation-duration) var(--sbb-animation-easing);
 }

src/elements/image/image.ts

@@ -158,6 +158,7 @@ const breakpointMap: Record<string, number> = {
  * @cssprop [--sbb-image-border-radius=var(--sbb-border-radius-4x)] - Can be used to override the
  * `borderRadius` property in case of different values for different viewports.
  * @cssprop [--sbb-image-object-position] - Can be used to set the object-position css property of the image itself if the image itself is cropped.
+ * @cssprop [--sbb-image-object-fit=cover] - Can be used to set the object-fit css property of the image itself if the image itself is cropped.
  */
 @customElement('sbb-image')
 export class SbbImageElement extends LitElement {

src/elements/image/image.visual.spec.ts

@@ -132,5 +132,19 @@ describe(`sbb-image`, () => {
         await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!);
       }),
     );
+
+    it(
+      'cropped with object-fit',
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(
+          html`<sbb-image
+            image-src=${imageUrl}
+            style="width: 200px; height: 300px; --sbb-image-object-fit: contain"
+          ></sbb-image>`,
+        );
+
+        await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!);
+      }),
+    );
   });
 });