Images with incorrect metadata should correct their depiction in the timeline once the image has actually been loaded

### Steps to reproduce

As of https://github.com/matrix-org/matrix-react-sdk/commit/7b6536c297fbd44ab6cd1b66ce71d99c790852f7#diff-265bce8083cb791022167e130a59ebba99e3e974d9d3120f953ed41461b0f22a (edit: this was also a problem before with `max-width` and `max-height` in the same line **which led to cut images**) there's a problem with some exif rotated images due to the aspect-ratio and some clients sending swapped out w/h which makes css `aspect-ratio` have swapped w/h:

Some clients:
```
"content": {
"body": "left.jpg",
"info": {
"size": 3874,
"mimetype": "image/jpeg",
"w": 480,
"h": 640,
"xyz.amorgan.blurhash": "T3TI,axu~qofj[t7~qof00-;ayM{"
},
"msgtype": "m.image",
"url": "mxc://supercable.onl/UIEMyFcdPHvVWaCpOScbCOuk"
}
```

Other clients with swapped out w/h:
```
"content": {
"body": "left.jpg",
"info": {
"size": 3874,
"mimetype": "image/jpeg",
"w": 640,
"h": 480,
"xyz.amorgan.blurhash": "T3TI,axu~qofj[t7~qof00-;ayM{"
},
"msgtype": "m.image",
"url": "mxc://supercable.onl/UIEMyFcdPHvVWaCpOScbCOuk"
}
```

### What happened?


### What did you expect?

Right css `aspect-ratio`, at least after image has been loaded.