mirror of
https://github.com/vector-im/hydrogen-web.git
synced 2024-12-23 03:25:12 +01:00
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:
parent
5183615994
commit
cb10d40c3a
@ -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 {
|
||||||
|
@ -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(
|
||||||
|
Loading…
Reference in New Issue
Block a user