mirror
/
photoview
mirror of https://github.com/photoview/photoview.git
1
Fork 0
Code

Fix image preview aspect-ratio in sidebar

This commit is contained in:
viktorstrate 2020-07-02 22:08:11 +02:00
parent c915b7741f
commit aafcd64c23
1 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
ui/src/components/sidebar/PhotoSidebar.js
View File

@ -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>