Remove default setting for object-fit on future fill images (#39297)

This PR removes the default styling of `object-fit:"contain"` for images using the future image component. This means images will get the default `object-fit` behavior of `"fill"`.

The main reason for this change is that an inline style will take precedence over external CSS, making this default behavior difficult to override with some styling strategies.


Co-authored-by: Steven <229881+styfle@users.noreply.github.com>

docs/api-reference/next/future/image.md

@@ -237,9 +237,11 @@ A boolean that causes the image to fill the parent element instead of setting [`
 
 The parent element _must_ assign `position: "relative"`, `position: "fixed"`, or `position: "absolute"` style.
 
-By default, the img element will automatically assign `object-fit: "contain"` and `position: "absolute"` styles.
+By default, the img element will automatically be assigned the `position: "absolute"` style.
 
-Optionally, `object-fit` can be assigned any other value such as `object-fit: "cover"`. For this to look correct, the `overflow: "hidden"` style should be assigned to the parent element.
+The default image fit behavior will stretch the image to fit the container. You may prefer to set `object-fit: "contain"` for an image which is letterboxed to fit the container and preserve aspect ratio.
+
+Alternatively, `object-fit: "cover"` will cause the image to fill the entire container and be cropped to preserve aspect ratio. For this to look correct, the `overflow: "hidden"` style should be assigned to the parent element.
 
 See also:
 

packages/next/client/future/image.tsx

@@ -572,7 +572,6 @@ export default function Image({
     fill
       ? {
           position: 'absolute',
-          objectFit: 'contain',
           height: '100%',
           width: '100%',
         }

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

@@ -959,13 +959,10 @@ function runTests(mode) {
         await browser.elementById('fill-image-1').getAttribute('data-nimg')
       ).toBe('future-fill')
     })
-    it('should add position:absolute and object-fit to fill images', async () => {
+    it('should add position:absolute to fill images', async () => {
       expect(await getComputedStyle(browser, 'fill-image-1', 'position')).toBe(
         'absolute'
       )
-      expect(
-        await getComputedStyle(browser, 'fill-image-1', 'object-fit')
-      ).toBe('contain')
     })
     it('should add 100% width and height to fill images', async () => {
       expect(