다시 인사드립니다!
이전 포럼이 Flarum이었을 때, 재미있는 장난으로 크기 태그를 추가하여 이미지의 높이와 너비를 조정해 이미지를 늘리거나 찌그러뜨리는 것이 있었습니다. 다음과 같은 방식이었죠 (태그 사용법을 정확히 기억하지는 못합니다).
Discourse에서는 업로드한 이미지에서 HTML 동등 태그를 사용해 봤지만, 이 경우 이미지가 자르기(crop)만 됩니다.
Discourse에서 업로드한 이미지로 이런 작업을 할 수 있는 방법이 있는 것 같지 않습니다. 제가 틀린 걸까요?
이미지가 크고 차원을 변경하면, 라이트박스 CSS 때문에 자동으로 잘립니다.
크기를 조정해도 마찬가지입니다:
작은 이미지는 원하는 종횡비(aspect ratio)로 게시할 수 있습니다.
<img> 태그에 avatar와 같은 승인된 클래스를 사용하는 등, 매우 해킹적인(hacky) 방법이 있을 수 있습니다:
<img width="376" height="50" src="https://meta.discourse.org/secure-uploads/meta/original/4X/b/e/6/be6f2ea64830fe0aaec6c192f3b39c38ce5f179c.png" class="avatar">
하지만 이렇게 하면 border-radius가 강제됩니다.
원본은 정사각형이며 라이트박스가 강제됩니다:
관리자라면, 커스텀 랩(wrap)을 사용하고 CSS 규칙을 정의하는 것이 가장 쉬운 방법이라고 생각합니다. 예를 들어:
[wrap=ratio]
!image|500x300](upload://raEVqkaMNqIXQ9YcsiZuYefukFu.png)
[/wrap]
[data-wrap="ratio"] .lightbox-wrapper img {
object-fit: unset;
}
사용자로서 종횡비를 강제하는 방법이 있거나, 심지어 관리자로서 더 쉬운 방법이 있을 수도 있어 놀라지 않을 것입니다. 랩을 사용하지 않고 라이트박스 div에서 object-fit에 unset을 강제하는 것도 방법이지만, 그렇게 하면 일반 레이아웃이 깨질 수 있습니다. 확신은 없습니다.