Images that show correctly on the editor are not scaled appropriately on the actual post.

[vrthra]

It seems that the images are not scaled correctly in the timeline.

What it looks like when pasting the image in the editor.

What it looks like when viewing in the time line.

What it looks at a mastodon timeline

It would be great if the image width is similar to how it was shown when editing.

[toddsundsted]

i'm not super enthusiastic about how the presentation looks on either ktistec or mastodon—in the feed, the image window is a fixed size and long or wide posts end up clipped in unattractive ways. maybe the thing to do here is a server setting that controls this—though there will always be pathological cases that are just going to look bad (10000x 100 pixels).

[JayVii]

The semantic UI sets the CSS for the images in the timeline as:

.ui.feed > .event img.extra.image {
  width: 100%;
}

which results in the clipping of images with too much height. Regarding images that are too wide, semantic UI sets this:

.ui.feed img.extra.image, .ui.feed video.extra.video {
  height: 375px;
}

It looks a lot better if this was used instead:

.ui.feed > .event img.extra.image, .ui.feed > .event img.extra.video {
  width: auto;
  margin-left: auto;
  margin-right: auto;
}
.ui.feed img.extra.image, .ui.feed video.extra.video {
  height: auto;
}

Although there probably should be some width and height limit, particularly for smaller screens unless you want edge-cases that are really awkward to navigate or overflow.

It seems as if sometimes images are zokmed-in/clipped both horizontally as well as vertically. To the very least the best fit of height or width should be used, I suppose. There is likely no perfect option and there will always be some clipping involved. Maybe the UI should make it more obvious that the image is only a preview (mastodon does this with a broder-frame around the image)