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

This reverts commit 0e5ad9805a.

It does not seem to work anymore in FF & chrome (the tile grows after the image is loaded)
and this won't work in IE11 anyways
This commit is contained in:
Bruno Windels 2020-08-12 16:47:07 +02:00
parent 5183615994
commit cb10d40c3a
2 changed files with 24 additions and 3 deletions

View File

@ -33,10 +33,29 @@ limitations under the License.
word-break: break-word; word-break: break-word;
} }
.message-container .sender {
margin: 5px 0;
font-size: 0.9em;
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: auto; height: 100%;
} }
.TextMessageView { .TextMessageView {

View File

@ -18,17 +18,19 @@ 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(