object-cover

src/components/PhotoPack/PhotoPack.svelte

@@ -106,7 +106,7 @@
             aria-labelledby="{id}-figure-{ri}-{i}"
           >
             <img
-              class="m-0 w-full h-full"
+              class="m-0 w-full h-full object-cover"
               src="{img.src}"
               alt="{img.altText}"
               style:max-height="{img.maxHeight ? img.maxHeight + 'px' : ''}"
@@ -142,9 +142,6 @@
   div.photopack-container {
     div.photopack-row {
       figure {
-        img {
-          object-fit: cover;
-        }
         div.alt-warning {
           background-color: red;
           color: white;

src/docs/styles/tokens/layout/main.stories.mdx

@@ -12,6 +12,12 @@ import display from '$lib/scss/tokens/layout/\_display.scss?raw';
 {/* @ts-ignore */}
 import floats from '$lib/scss/tokens/layout/\_floats.scss?raw';
 
+{/* @ts-ignore */}
+import objectFit from '$lib/scss/tokens/layout/\_object-fit.scss?raw';
+
+{/* @ts-ignore */}
+import objectPosition from '$lib/scss/tokens/layout/\_object-position.scss?raw';
+
 {/* @ts-ignore */}
 import position from '$lib/scss/tokens/layout/\_position.scss?raw';
 
@@ -52,3 +58,19 @@ import position from '$lib/scss/tokens/layout/\_position.scss?raw';
   body={cssStringToTableArray(boxSizing)}
   copyable={[true, false]}
 />
+
+<CopyTable
+  title="Object fit"
+  mdnLink="object-fit"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(objectFit)}
+  copyable={[true, false]}
+/>
+
+<CopyTable
+  title="Object position"
+  mdnLink="object-position"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(objectPosition)}
+  copyable={[true, false]}
+/>

src/scss/tokens/layout/_main.scss

@@ -2,4 +2,6 @@
 @forward 'box-sizing';
 @forward 'display';
 @forward 'floats';
+@forward 'object-fit';
+@forward 'object-position';
 @forward 'position';

src/scss/tokens/layout/_object-fit.scss

@@ -0,0 +1,30 @@
+.object-contain {
+  object-fit: contain;
+}
+.object-cover {
+  object-fit: cover;
+}
+.object-fill {
+  object-fit: fill;
+}
+.object-none {
+  object-fit: none;
+}
+.object-scale-down {
+  object-fit: scale-down;
+}
+.\!object-contain {
+  object-fit: contain !important;
+}
+.\!object-cover {
+  object-fit: cover !important;
+}
+.\!object-fill {
+  object-fit: fill !important;
+}
+.\!object-none {
+  object-fit: none !important;
+}
+.\!object-scale-down {
+  object-fit: scale-down !important;
+}

src/scss/tokens/layout/_object-position.scss

@@ -0,0 +1,54 @@
+.object-bottom {
+  object-position: bottom;
+}
+.object-center {
+  object-position: center;
+}
+.object-left {
+  object-position: left;
+}
+.object-left-bottom {
+  object-position: left bottom;
+}
+.object-left-top {
+  object-position: left top;
+}
+.object-right {
+  object-position: right;
+}
+.object-right-bottom {
+  object-position: right bottom;
+}
+.object-right-top {
+  object-position: right top;
+}
+.object-top {
+  object-position: top;
+}
+.\!object-bottom {
+  object-position: bottom !important;
+}
+.\!object-center {
+  object-position: center !important;
+}
+.\!object-left {
+  object-position: left !important;
+}
+.\!object-left-bottom {
+  object-position: left bottom !important;
+}
+.\!object-left-top {
+  object-position: left top !important;
+}
+.\!object-right {
+  object-position: right !important;
+}
+.\!object-right-bottom {
+  object-position: right bottom !important;
+}
+.\!object-right-top {
+  object-position: right top !important;
+}
+.\!object-top {
+  object-position: top !important;
+}