Add objectFit to Thumbnail

Fixes #842
hypothesis · May 18, 2023 · 6eed7e1 · 6eed7e1
1 parent 75e525b
commit 6eed7e1
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/src/components/data/Thumbnail.tsx b/src/components/data/Thumbnail.tsx
@@ -12,6 +12,11 @@ type ComponentProps = {
   borderless?: boolean;
   loading?: boolean;
 
+  /**
+   * How should AspectRatio fit the contained content?
+   */
+  objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+
   /**
    * Custom content to show if there are no children, and not in a loading state
    */
@@ -44,6 +49,7 @@ const Thumbnail = function Thumbnail({
 
   borderless = false,
   loading = false,
+  objectFit = 'cover',
   placeholder,
   ratio = '16/9',
   size = 'md',
@@ -78,7 +84,7 @@ const Thumbnail = function Thumbnail({
       })}
     >
       <div className="bg-white h-full w-full flex items-center justify-center overflow-hidden">
-        <AspectRatio ratio={ratio}>
+        <AspectRatio ratio={ratio} objectFit={objectFit}>
           {loading ? (
             <div>
               <Spinner size={size} />