mirror of
https://github.com/vector-im/hydrogen-web.git
synced 2024-12-23 03:25:12 +01:00
fix image aspect ratio when scaling, again
also when image hasn't loaded yet to prevent scroll position jumps
This commit is contained in:
parent
c73bf96a58
commit
1ec2543467
@ -27,10 +27,23 @@
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-container img {
|
.message-container a {
|
||||||
max-width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: block;
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
max-width: 100%;
|
||||||
|
/* width and padding-top set inline to maintain aspect ratio,
|
||||||
|
replace with css aspect-ratio once supported */
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-container img {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.TextMessageView {
|
.TextMessageView {
|
||||||
|
@ -2,12 +2,26 @@ import {TemplateView} from "../../../general/TemplateView.js";
|
|||||||
|
|
||||||
export class ImageView extends TemplateView {
|
export class ImageView extends TemplateView {
|
||||||
render(t, vm) {
|
render(t, vm) {
|
||||||
|
// replace with css aspect-ratio once supported
|
||||||
|
const heightRatioPercent = (vm.thumbnailHeight / vm.thumbnailWidth) * 100;
|
||||||
|
const image = t.img({
|
||||||
|
src: vm.thumbnailUrl,
|
||||||
|
width: vm.thumbnailWidth,
|
||||||
|
height: vm.thumbnailHeight,
|
||||||
|
loading: "lazy",
|
||||||
|
alt: vm.label,
|
||||||
|
});
|
||||||
|
const linkContainer = t.a({
|
||||||
|
href: vm.url,
|
||||||
|
target: "_blank",
|
||||||
|
style: `padding-top: ${heightRatioPercent}%; width: ${vm.thumbnailWidth}px;`
|
||||||
|
}, image);
|
||||||
|
|
||||||
return t.li(
|
return t.li(
|
||||||
{className: {"TextMessageView": true, own: vm.isOwn, pending: vm.isPending}},
|
{className: {"TextMessageView": true, own: vm.isOwn, pending: vm.isPending}},
|
||||||
t.div({className: "message-container"}, [
|
t.div({className: "message-container"}, [
|
||||||
t.div({className: "sender"}, vm => vm.isContinuation ? "" : vm.sender),
|
t.div({className: "sender"}, vm => vm.isContinuation ? "" : vm.sender),
|
||||||
t.div(t.a({href: vm.url, target: "_blank"},
|
t.div(linkContainer),
|
||||||
t.img({src: vm.thumbnailUrl, width: vm.thumbnailWidth, height: vm.thumbnailHeight, loading: "lazy", alt: vm.label}))),
|
|
||||||
t.p(t.time(vm.date + " " + vm.time)),
|
t.p(t.time(vm.date + " " + vm.time)),
|
||||||
])
|
])
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user