[@mantine/core] Image: Fix incorrect placeholder size calculation whe…

…n width/height is not set (#2675)

* [docs] Fix typo (#2604)

* [@mantine/core] Image: Add div around placeholder

Co-authored-by: Alf <62615304+Alf-Melmac@users.noreply.github.com>

src/mantine-core/src/Image/Image.story.tsx

@@ -1,8 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { storiesOf } from '@storybook/react';
 import { useInterval } from '@mantine/hooks';
+import { MantineProvider } from '@mantine/styles';
 import { Container } from '../Container';
 import { Image } from './Image';
+import { AspectRatio } from '../AspectRatio';
 
 const images = [
   'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3748&q=80',
@@ -36,4 +38,18 @@ storiesOf('Image', module)
     <Container size={60}>
       <Image radius="sm" src={null} withPlaceholder width={50} height={50} />
     </Container>
+  ))
+  .add('Responsive Image with AspectRatio', () => (
+    <MantineProvider withGlobalStyles withNormalizeCSS>
+      <div style={{ width: 400, padding: 20, backgroundColor: '#fdf' }}>
+        <p>Responsive Image with AspectRatio</p>
+        <AspectRatio ratio={2}>
+          <Image src="https://picsum.photos/600/600" withPlaceholder />
+        </AspectRatio>
+        <p>Responsive Placeholder with AspectRatio</p>
+        <AspectRatio ratio={2}>
+          <Image withPlaceholder />
+        </AspectRatio>
+      </div>
+    </MantineProvider>
   ));

src/mantine-core/src/Image/Image.tsx

@@ -115,7 +115,11 @@ export const Image = forwardRef<HTMLDivElement, ImageProps>((props: ImageProps,
 
           {isPlaceholder && (
             <div className={classes.placeholder} title={alt}>
-              {placeholder || <ImageIcon style={{ width: 40, height: 40 }} />}
+              {placeholder || (
+                <div>
+                  <ImageIcon style={{ width: 40, height: 40 }} />
+                </div>
+              )}
             </div>
           )}
         </div>