PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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
Show stats 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