fix(react-image): ensure height and width props always applied (microsoft#35161)

Author: mainframev

change/@fluentui-react-image-176dfbd4-3b94-4cd0-b216-8dd6089cd927.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: apply fit fill styles only if height and width are not provided",
+  "packageName": "@fluentui/react-image",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-image/library/src/components/Image/useImageStyles.styles.ts

@@ -39,27 +39,26 @@ const useStyles = makeStyles({
   center: {
     objectFit: 'none',
     objectPosition: 'center',
-    height: '100%',
-    width: '100%',
   },
   contain: {
     objectFit: 'contain',
     objectPosition: 'center',
-    height: '100%',
-    width: '100%',
   },
   default: {
     /* The default styles are exactly the same as the base styles. */
   },
   cover: {
     objectFit: 'cover',
     objectPosition: 'center',
-    height: '100%',
-    width: '100%',
   },
   none: {
     objectFit: 'none',
     objectPosition: 'left top',
+  },
+
+  // When no explicit height/width props are provided, apply full-size
+  // sizing so fit modes behave as intended (object-fit fills the element).
+  fitFill: {
     height: '100%',
     width: '100%',
   },
@@ -75,13 +74,19 @@ export const useImageStyles_unstable = (state: ImageState): ImageState => {
 
   const styles = useStyles();
 
+  const { height, width } = state.root;
+  // eslint-disable-next-line eqeqeq
+  const hasExplicitSize = height != null || width != null;
+  const shouldApplyFitFill = state.fit !== 'default' && !hasExplicitSize;
+
   state.root.className = mergeClasses(
     imageClassNames.root,
     styles.base,
     state.block && styles.block,
     state.bordered && styles.bordered,
     state.shadow && styles.shadow,
     styles[state.fit],
+    shouldApplyFitFill && styles.fitFill,
     styles[state.shape],
     state.root.className,
   );