Add props objectFit and objectPosition to Image component

examples/image-component/pages/background.js

@@ -1,5 +1,5 @@
 import Image from 'next/image'
-import { bgWrap, bgText, objectFitCover } from '../styles.module.css'
+import { bgWrap, bgText } from '../styles.module.css'
 
 const Background = () => (
   <div>
@@ -8,8 +8,8 @@ const Background = () => (
         alt="Mountains"
         src="/mountains.jpg"
         layout="fill"
+        objectFit="cover"
         quality={100}
-        className={objectFitCover}
       />
     </div>
     <p className={bgText}>

examples/image-component/pages/layout-fill.js

@@ -1,9 +1,4 @@
 import Image from 'next/image'
-import {
-  objectFitContain,
-  objectFitCover,
-  objectFitNone,
-} from '../styles.module.css'
 
 const Fill = () => (
   <div>
@@ -13,23 +8,23 @@ const Fill = () => (
         alt="Mountains"
         src="/mountains.jpg"
         layout="fill"
-        className={objectFitCover}
+        objectFit="cover"
       />
     </div>
     <div style={{ position: 'relative', width: '300px', height: '500px' }}>
       <Image
         alt="Mountains"
         src="/mountains.jpg"
         layout="fill"
-        className={objectFitContain}
+        objectFit="contain"
       />
     </div>
     <div style={{ position: 'relative', width: '300px', height: '500px' }}>
       <Image
         alt="Mountains"
         src="/mountains.jpg"
         layout="fill"
-        className={objectFitNone}
+        objectFit="none"
         quality={100}
       />
     </div>

examples/image-component/styles.module.css

@@ -48,13 +48,3 @@
   padding-top: 40vh;
   text-shadow: 1px 1px 1px #3c5c5e;
 }
-
-.objectFitContain {
-  object-fit: contain;
-}
-.objectFitCover {
-  object-fit: cover;
-}
-.objectFitNone {
-  object-fit: none;
-}

packages/next/client/image.tsx

@@ -30,6 +30,8 @@ type ImageData = {
   domains?: string[]
 }
 
+type ImgElementStyle = NonNullable<JSX.IntrinsicElements['img']['style']>
+
 type ImageProps = Omit<
   JSX.IntrinsicElements['img'],
   'src' | 'srcSet' | 'ref' | 'width' | 'height' | 'loading' | 'style'
@@ -39,6 +41,8 @@ type ImageProps = Omit<
   priority?: boolean
   loading?: LoadingValue
   unoptimized?: boolean
+  objectFit?: ImgElementStyle['objectFit']
+  objectPosition?: ImgElementStyle['objectPosition']
 } & (
     | {
         width?: never
@@ -247,6 +251,8 @@ export default function Image({
   quality,
   width,
   height,
+  objectFit,
+  objectPosition,
   ...all
 }: ImageProps) {
   const thisEl = useRef<HTMLImageElement>(null)
@@ -342,7 +348,7 @@ export default function Image({
   let wrapperStyle: JSX.IntrinsicElements['div']['style'] | undefined
   let sizerStyle: JSX.IntrinsicElements['div']['style'] | undefined
   let sizerSvg: string | undefined
-  let imgStyle: JSX.IntrinsicElements['img']['style'] = {
+  let imgStyle: ImgElementStyle | undefined = {
     visibility: lazy ? 'hidden' : 'visible',
 
     position: 'absolute',
@@ -363,6 +369,9 @@ export default function Image({
     maxWidth: '100%',
     minHeight: '100%',
     maxHeight: '100%',
+
+    objectFit,
+    objectPosition,
   }
   if (
     typeof widthInt !== 'undefined' &&

test/integration/image-component/default/pages/layout-fill.js

@@ -10,7 +10,13 @@ const Page = () => {
       </div>
       <p>Layout Fill</p>
       <div style={{ position: 'relative', width: '100vw', height: '100vh' }}>
-        <Image id="fill2" src="/wide.png" layout="fill" />
+        <Image
+          id="fill2"
+          src="/wide.png"
+          layout="fill"
+          objectFit="cover"
+          objectPosition="left"
+        />
       </div>
       <p>Layout Fill</p>
     </div>

test/integration/image-component/default/test/index.test.js

@@ -294,6 +294,15 @@ function runTests(mode) {
       })
       expect(await getComputed(browser, id, 'width')).toBe(smallWidth)
       expect(await getComputed(browser, id, 'height')).toBe(smallHeight)
+
+      const objectFit = await browser.eval(
+        `document.getElementById("${id}").style.objectFit`
+      )
+      const objectPosition = await browser.eval(
+        `document.getElementById("${id}").style.objectPosition`
+      )
+      expect(objectFit).toBe('cover')
+      expect(objectPosition).toBe('left')
     } finally {
       if (browser) {
         await browser.close()

test/integration/image-component/typescript/pages/valid.tsx

@@ -44,6 +44,20 @@ const Page = () => {
         width={100}
         height={100}
       />
+      <Image
+        id="object-fit-cover-position-right"
+        src="https://via.placeholder.com/500"
+        layout="fill"
+        objectFit="cover"
+        objectPosition="right"
+      />
+      <Image
+        id="object-fit-scale-down-position-50px"
+        src="https://via.placeholder.com/500"
+        layout="fill"
+        objectFit="scale-down"
+        objectPosition="50px"
+      />
       <p id="stubtext">This is valid usage of the Image component</p>
     </div>
   )