Arsharth/hydrogen-web
1
0
Fork 0
forked from mystiq/hydrogen-web
Code Issues Pull requests Projects Releases Packages Wiki Activity

use intrinsic aspect-ratio supported by chrome and firefox (although not safari)

Browse source
This commit is contained in:
Bruno Windels 2020-05-13 10:20:28 +02:00
parent aa0692da3e
commit 0e5ad9805a
2 changed files with 3 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/ui/web/css/timeline.css
View file

@ -27,23 +27,10 @@
font-weight: bold; font-weight: bold;
} }
.message-container a {
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 { .message-container img {
display: block; display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%; width: 100%;
height: 100%; height: auto;
} }
.TextMessageView { .TextMessageView {

6
src/ui/web/session/room/timeline/ImageView.js
View file

@ -2,19 +2,17 @@ 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({ const image = t.img({
src: vm.thumbnailUrl, src: vm.thumbnailUrl,
width: vm.thumbnailWidth, width: vm.thumbnailWidth,
height: vm.thumbnailHeight, height: vm.thumbnailHeight,
loading: "lazy", loading: "lazy",
style: `max-width: ${vm.thumbnailWidth}px`,
alt: vm.label, alt: vm.label,
}); });
const linkContainer = t.a({ const linkContainer = t.a({
href: vm.url, href: vm.url,
target: "_blank", target: "_blank"
style: `padding-top: ${heightRatioPercent}%; width: ${vm.thumbnailWidth}px;`
}, image); }, image);
return t.li( return t.li(