element-hq / element-hq/element-web
Setting width CSS attribute on <img> inside <table> can cause the image to have an incorrect size
- 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.
#### What happened instead?
Case 2.
### 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
Assessment
This issue has not been assessed yet.