matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-11-07 10:46:24 +03:00
Code Activity

Shift thumbnail dislay to use object-fit to preserve aspect-ratio

Browse Source
This commit is contained in:
Germain Souquet
2021-07-21 10:03:10 +02:00
parent 794c49c5db
commit a7cd5fc49b
2 changed files with 1 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
res/css/views/messages/_MImageBody.scss
View File

@@ -21,11 +21,7 @@ $timelineImageBorderRadius: 4px;
} }
.mx_MImageBody_thumbnail { .mx_MImageBody_thumbnail {
position: absolute; object-fit: contain;
width: 100%;
height: 100%;
left: 0;
top: 0;
border-radius: $timelineImageBorderRadius; border-radius: $timelineImageBorderRadius;
display: flex; display: flex;

1
src/components/views/messages/MImageBody.tsx
View File

@@ -362,7 +362,6 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
const thumbnail = ( const thumbnail = (
<div className="mx_MImageBody_thumbnail_container" style={{ maxHeight: maxHeight + "px", maxWidth: maxWidth + "px" }} > <div className="mx_MImageBody_thumbnail_container" style={{ maxHeight: maxHeight + "px", maxWidth: maxWidth + "px" }} >
{ /* Calculate aspect ratio, using %padding will size _container correctly */ } { /* Calculate aspect ratio, using %padding will size _container correctly */ }
<div style={{ paddingBottom: forcedHeight ? (forcedHeight + "px") : ((100 * infoHeight / infoWidth) + '%') }} />
{ showPlaceholder && { showPlaceholder &&
<div className="mx_MImageBody_thumbnail" style={{ <div className="mx_MImageBody_thumbnail" style={{
// Constrain width here so that spinner appears central to the loaded thumbnail // Constrain width here so that spinner appears central to the loaded thumbnail