mirror of https://github.com/vector-im/riot-web
Fix image preview sizing for edge cases (#8322)
parent
ffeab40af6
commit
1436f23e2f
|
@ -38,6 +38,12 @@ $timeline-image-border-radius: 8px;
|
|||
// Necessary for the border radius to apply correctly to the placeholder
|
||||
overflow: hidden;
|
||||
contain: paint;
|
||||
|
||||
min-height: $font-44px;
|
||||
min-width: $font-44px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mx_MImageBody_thumbnail {
|
||||
|
|
|
@ -114,6 +114,11 @@ limitations under the License.
|
|||
padding-right: 48px;
|
||||
}
|
||||
|
||||
.mx_MImageBody_thumbnail_container {
|
||||
min-height: calc(1.8rem + var(--gutterSize) + var(--gutterSize));
|
||||
min-width: calc(1.8rem + var(--gutterSize) + var(--gutterSize));
|
||||
}
|
||||
|
||||
.mx_CallEvent {
|
||||
background-color: unset;
|
||||
|
||||
|
|
|
@ -364,10 +364,12 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
|
|||
|
||||
let infoWidth: number;
|
||||
let infoHeight: number;
|
||||
let infoSvg = false;
|
||||
|
||||
if (content.info?.w && content.info?.h) {
|
||||
infoWidth = content.info.w;
|
||||
infoHeight = content.info.h;
|
||||
infoSvg = content.info.mimetype.startsWith("image/svg");
|
||||
} else {
|
||||
// Whilst the image loads, display nothing. We also don't display a blurhash image
|
||||
// because we don't really know what size of image we'll end up with.
|
||||
|
@ -449,6 +451,11 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
|
|||
'mx_MImageBody_placeholder--blurhash': this.props.mxEvent.getContent().info?.[BLURHASH_FIELD],
|
||||
});
|
||||
|
||||
// many SVGs don't have an intrinsic size if used in <img> elements.
|
||||
// due to this we have to set our desired width directly.
|
||||
// this way if the image is forced to shrink, the height adapts appropriately.
|
||||
const sizing = infoSvg ? { maxHeight, maxWidth, width: maxWidth } : { maxHeight, maxWidth };
|
||||
|
||||
const thumbnail = (
|
||||
<div className="mx_MImageBody_thumbnail_container" style={{ maxHeight, maxWidth, aspectRatio: `${infoWidth}/${infoHeight}` }}>
|
||||
<SwitchTransition mode="out-in">
|
||||
|
@ -463,7 +470,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
|
|||
</CSSTransition>
|
||||
</SwitchTransition>
|
||||
|
||||
<div style={{ maxHeight, maxWidth }}>
|
||||
<div style={sizing}>
|
||||
{ img }
|
||||
{ gifLabel }
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue