element-hq / element-hq/element-web

Setting width CSS attribute on <img> inside <table> can cause the image to have an incorrect size

Open
#31,624 1 comment 0 reactions 0 assignees View on GitHub
A-Media A-Timeline O-Uncommon S-Minor T-Defect
Dominant language
TypeScript
Stars
13.5k
Forks
2.8k
PR merge metrics
PR metrics pending

Description

### Steps to reproduce

If you put an image using \ tag inside a \ cell next to a cell full of text, setting the *width* CSS attribute on \ causes the image not to retain designated dimensions. Instead, the image is being shrunk.

The original size of the image used in the following example is 230 x 325 (width x height). Setting height is irrelevant - the same thing happens if you omit it.

#### Case 1. Message content when only image height is set (it behaves as expected)
```
{
"content": {
"body": "",
"format": "org.matrix.custom.html",
"formatted_body": "lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum ",
"msgtype": "m.notice"
},
"origin_server_ts": 1767277116472,
"sender": "@[redacted]",
"type": "m.room.message",
"unsigned": {
"membership": "join"
},
"event_id": "$[redacted]",
"room_id": "![redacted]"
}
```

#### Case 2. Message content when additional width attribute is set (the bug occurs)
```
{
"content": {
"body": "",
"format": "org.matrix.custom.html",
"formatted_body": "lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum ",
"msgtype": "m.notice"
},
"origin_server_ts": 1767276932222,
"sender": "@[redacted]",
"type": "m.room.message",
"unsigned": {
"membership": "join"
},
"event_id": "$[redacted]",
"room_id": "![redacted]"
}
```

### Outcome

#### What did you expect?
Case 1.
Image

#### What happened instead?
Case 2.

Image

### Operating system

Fedora 43 KDE

### Browser information

Mozilla Firefox 146.0

### URL for webapp

https://app.element.io

### Application version

Element: 1.12.7 crypto: Rust SDK 0.14.0 (c3b7918), Vodozemac 0.9.0

### Homeserver

matrix.org

### Will you send logs?

No

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.