게시물 끝까지 폭을 최대화하는 방법

포트레이트(세로) 이미지가 게시될 때 크기가 조정되지 않도록 하려고 합니다… 전체 폭이 고려되기를 원하는데… 어떻게 해야 할까요… ?

아마도 누군가가 해당 페이지를 구체적으로 확인해 줄지도 모르니 페이지를 제공해 보세요. 아니면 브라우저에 있는 페이지 검사 기능을 이용해서, 작업 중인 요소에 object-fit: contain/fill 등을 추가하거나, 여백이나 aspect-ratio 등을 조정해 보면 답을 찾게 될 거라고 확신합니다 :+1:

이렇게요

물론 몇 달러나 비트코인을 제공할 수 있다면 마켓플레이스 방식을 무시할 수는 없습니다 :hugs:

사이트 설정에서 image를 검색해서 설정을 조정해 볼 수 있습니다. 하지만 제가 보기에 여러분이 찾으시는 것을 얻기 어렵다고 생각합니다. 물론 플러그인과 테마를 활용하면 기이하고 멋진 것들을 만들 수 있지만, 현재 우리가 가진 정보에 기반하면 그다지 쉽거나, 심지어 가능하지도 않을 것 같은 느낌이 듭니다.

하지만 전에 제가 틀린 적이 몇 번 있었습니다. :zany_face:

관리자 설정인 min ratio to crop가 이 문제를 해결하는 데 도움이 될까요?

이 Customization > Theme component 도 도움이 될 수 있습니다. 다만 아직 실험 단계라는 점을 유념해 주세요. Meta에서도 일부 Customization > Theme 에 사용되고 있습니다.

이것을 시도해 보았지만, 그게 문제가 아니었습니다. - 아직 해결책을 찾고 있습니다.

Jagster가 제안한 대로 다른 이미지 설정도 확인해 보셨나요? 특히 max image width 설정을요.

해봤습니다 - 1200으로 변경해도 차이가 없습니다… 제가 찾은 유일한 방법은 실제 사진 자체를 수정하는 것이었습니다.

단순히 "세로 이미지"가 게시물의 전체 너비를 차지하게 하고 싶습니다.

이 컴포넌트는 불안정합니다. 최신 버전의 discourse를 설치해도 모든 요소를 왼쪽으로 이동시켜(패딩 없음) 스테이징 테마가 깨졌습니다.

아마도 해당 이미지들이 최대 이미지 높이보다 먼저 최대 이미지 너비를 초과하는 것일까요?

일반적으로 이미지의 크기를 제한하는 것은 좋은 것 같습니다. 태블릿 같은 작은 화면에서는 그렇지 않으면 이미지가 화면보다 더 크게 표시될 테니까요.

이상하네. 태블릿은 사이트가 어떻게 권장하든 항상 확대/축소(스케일링)가 되야 하는데. iPad는 어쨌든 그렇게 작동하고, 또 하나… 삼성 제품이었나? 하지만 모든 스마트폰은 그렇게 할 수 있어.

어쨌든. 이미지 처리는 디스커스의 취약점 중 하나야. 엉망진창이야.

간단한 문제인 것 같습니다… 세로로 게시된 이미지는 게시글 너비 컨테이너의 전체 폭을 차지해야 합니다… (기본값이 아니라면, 이 기능을 쉽게 설정할 수 있는 방법이 있으면 좋겠습니다).

여기서는 모든 사람이 라이트박싱을 신뢰하는 것 같습니다.

max image height(최대 이미지 높이)가 내 화면보다 높으면, 스크롤 없이 화면에 맞출 수 없습니다. 왜 태블릿이 게시물 안의 이미지를 리사이즈해야 합니까?


기본값에서는 다음과 같이 보입니다:

스크롤 없이 전체 이미지를 볼 수 있습니다.

최대 이미지 높이를 변경할 때는 서로 다른 화면 크기를 고려해야 합니다.

모바일이 데스크톱보다 사용성이 더 좋기 때문인가요?

네, 실험적 기능인 만큼 그런 위험이 있습니다. 패딩의 경우, 커스텀 컴포넌트를 추가하여 오버라이드를 적용하고 패딩 등을 설정할 수 있습니다.

포토그래피 포럼을 운영한다면 이미지가 가장 중요하며, 모든 사진이 세로형으로 게시되는 것은 아니지만, 세로형 사진이 올라오더라도 스크롤이 필요한 부분에 대해 불평하지 않습니다.

즉, 이미지의 고유 크기가 페이지 폭보다 작더라도 이미지를 전체 폭으로 늘리는 것을 원하시는 건가요?

화질이 저하될 가능성이 있으므로 이 방법은 권장하지 않지만:

최대 이미지 높이와 최대 이미지 폭 설정을 높은 값으로 설정하고 그리고 CSS를 사용하여 다음을 설정하는 조합을 시도해 보셨나요?

.cooked img:not(.thumbnail):not(.ytp-thumbnail-image):not(.emoji) {
    width: 100%;
    max-width: 100%;
}

제 환경에서는 이것이 설명하신 대로 동작하는 것 같습니다.

사진 게시판에서는 작은 이미지들이 표시되지 않는 것 같습니다. 다시 말하지만, 정확히는 모르지만 문제는 자동 축소(auto-downscaling)에 있는 것 같습니다. 모든 이미지가 800x무언가로 표시되고, 1500x무언가까지 보여줄 수 있는 공간에도 여백이 생기는 상황이거든요.

하지만 이건 기본적으로 데스크톱에서만 발생하는 문제라고 생각합니다. 모바일은 사용자가 무엇을 할 수 있고 할 수 없는지 추측하는 경향이 있으니까요.

사진작가들은 거의 “작은” 사진을 올리지 않습니다… 과정은 간단합니다:

1) 사진 업로드

사진이 게시글 폭보다 작을 경우:
비율을 유지하면서 폭을 게시글 폭에 맞게 늘립니다.

사진이 게시글 폭과 같거나 클 경우:
이미지 비율을 유지하되 게시글 폭 전체를 차지하도록 합니다.