fix image aspect ratio when scaling, again

also when image hasn't loaded yet to prevent scroll position jumps
This commit is contained in:
Bruno Windels 2020-05-10 11:56:05 +02:00
parent c73bf96a58
commit 1ec2543467
2 changed files with 32 additions and 5 deletions

View file

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

View file

@ -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)),
]) ])
); );