画像の縦横比を無視した任意のリサイズ

こんにちは!

以前、フォーラムがFlarumで稼働していた頃、画像のアスペクト比を変更して引き伸ばしたり縮小したりするために、サイズタグを追加するという楽しい機能がありました。例えば(タグの使い方は少し記憶違いかもしれませんが)、以下のようになります。

Discourseでアップロードした画像にHTMLの同等機能を使ってみましたが、画像がトリミングされるだけで、期待したような効果は得られませんでした。

Discourseでアップロードした画像に対して、この機能を実現する方法が見当たりません。私の勘違いでしょうか?

画像が大きい場合に寸法を変更すると、lightbox CSS によって自動的に切り取られます。

サイズを変更しても同様です。

小さい画像は、希望のアスペクト比で投稿できます。

image

image

<img> タグに avatar のような承認済みクラスを使用するなど、非常にハックな方法が見つかるかもしれませんが、

<img width="376" height="50" src="https://meta.discourse.org/secure-uploads/original/4X/b/e/6/be6f2ea64830fe0aaec6c192f3b39c38ce5f179c.png" class="avatar">

しかし、これは border-radius を強制します。

元は正方形で、lightbox を強制します。

管理者の場合、カスタムラップを使用して CSS ルールを定義するのが最も簡単な方法です。たとえば、次のようになります。

[wrap=ratio]
!image|500x300](upload://raEVqkaMNqIXQ9YcsiZuYefukFu.png)
[/wrap]
[data-wrap="ratio"] .lightbox-wrapper img {
    object-fit: unset;
}

AIによってキャプション付けされた、涙を流して笑っている顔の絵文字の画像。 (AIによるキャプション)

ユーザーとしてアスペクト比を強制する方法や、管理者としてさらに簡単な方法があるとしても、驚きません。おそらくラップを使用せず、lightbox div で object-fitunset に強制するだけでよいかもしれませんが、通常のレイアウトが壊れる可能性があります。わかりません。