Fix image preview aspect-ratio in sidebar
This commit is contained in:
parent
c915b7741f
commit
aafcd64c23
|
@ -34,9 +34,19 @@ const photoQuery = gql`
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
const PreviewImage = styled(ProtectedImage)`
|
const PreviewImageWrapper = styled.div`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: ${({ imageAspect }) => imageAspect * 100}%;
|
height: 0;
|
||||||
|
padding-top: ${({ imageAspect }) => Math.min(imageAspect, 0.75) * 100}%;
|
||||||
|
position: relative;
|
||||||
|
`
|
||||||
|
|
||||||
|
const PreviewImage = styled(ProtectedImage)`
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
`
|
`
|
||||||
|
|
||||||
|
@ -118,10 +128,11 @@ const SidebarContent = ({ photo, hidePreview }) => {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{!hidePreview && (
|
{!hidePreview && (
|
||||||
<PreviewImage
|
<PreviewImageWrapper
|
||||||
src={previewImage.url}
|
imageAspect={previewImage.height / previewImage.width}
|
||||||
imageAspect={previewImage.width / previewImage.height}
|
>
|
||||||
/>
|
<PreviewImage src={previewImage.url} />
|
||||||
|
</PreviewImageWrapper>
|
||||||
)}
|
)}
|
||||||
<Name>{photo && photo.title}</Name>
|
<Name>{photo && photo.title}</Name>
|
||||||
<ExifInfo>{exifItems}</ExifInfo>
|
<ExifInfo>{exifItems}</ExifInfo>
|
||||||
|
|
Loading…
Reference in New Issue