Improved support for images with extreme ratios
This commit is contained in:
parent
04d3769bd4
commit
4e223def29
2 changed files with 18 additions and 5 deletions
|
@ -56,6 +56,7 @@ const styles = {
|
|||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
outline: 'none',
|
||||
width: '100%',
|
||||
padding: 0,
|
||||
} as React.CSSProperties,
|
||||
mainContainer: {
|
||||
|
@ -84,6 +85,18 @@ const styles = {
|
|||
objectFit: 'contain',
|
||||
outline: 'none',
|
||||
} as React.CSSProperties,
|
||||
img: {
|
||||
position: 'absolute',
|
||||
left: '50%',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: 'auto',
|
||||
height: 'auto',
|
||||
maxWidth: '100%',
|
||||
maxHeight: '100%',
|
||||
objectFit: 'contain',
|
||||
outline: 'none',
|
||||
} as React.CSSProperties,
|
||||
caption: {
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
|
@ -361,7 +374,7 @@ export class Lightbox extends React.Component<Props, State> {
|
|||
>
|
||||
<img
|
||||
alt={i18n('lightboxImageAlt')}
|
||||
style={styles.object}
|
||||
style={styles.img}
|
||||
src={objectURL}
|
||||
/>
|
||||
</button>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue