Verified Commit 0bd249e8 authored by Sandro Lutz's avatar Sandro Lutz
Browse files

Improve Image component

parent bf0ea395
......@@ -32,6 +32,7 @@ const useStyles = makeStyles(
gridArea: 'image',
},
image: {
position: 'relative',
borderRadius: '4px',
overflow: 'hidden',
},
......
......@@ -20,11 +20,15 @@ const useStyles = makeStyles(
},
},
centered: {
position: 'absolute',
position: 'absolute !important',
top: '50%',
left: '50%',
transform: 'translateX(-50%) translateY(-50%)',
},
static: {
width: '100%',
height: '100%',
},
hidden: {
visibility: 'hidden',
},
......@@ -121,24 +125,34 @@ const Image = ({
}
if (type === 'fluid') {
return (
<Img
<div
className={[classes.root, className].join(' ')}
style={{ paddingBottom: `${ratio}%` }}
fluid={src}
alt={alt}
{...props}
/>
>
<Img
className={[classes.centered, classes.static].join(' ')}
fluid={src}
alt={alt}
{...props}
/>
</div>
)
}
if (type === 'fixed') {
return (
<Img
<div
className={[classes.root, className].join(' ')}
style={{ paddingBottom: `${ratio}%` }}
fixed={src}
alt={alt}
{...props}
/>
>
<Img
className={[classes.centered, classes.static].join(' ')}
fixed={src}
alt={alt}
{...props}
/>
</div>
)
}
return null
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment