사용자가 올린 이미지가 게시판 폭보다 크면 콘텐츠 영역이 메뉴 아래로 밀리는 등 레이아웃이 깨지는데, 보통 어떻게 처리하시나요?
공백 없는 긴 문장도 `word-break: break-all`을 적용하면 익스플로러에서는 줄바꿈되지만 파이어폭스에서는 표가 넓어집니다.
이런 경우 해결 방법이 궁금합니다.
게시판보다 큰 이미지와 긴 문장, 레이아웃 처리 방법이 궁금합니다
징징몬 2025.06.18 댓글 9
징징몬 2025.06.18 댓글 9
사용자가 올린 이미지가 게시판 폭보다 크면 콘텐츠 영역이 메뉴 아래로 밀리는 등 레이아웃이 깨지는데, 보통 어떻게 처리하시나요?
공백 없는 긴 문장도 `word-break: break-all`을 적용하면 익스플로러에서는 줄바꿈되지만 파이어폭스에서는 표가 넓어집니다.
이런 경우 해결 방법이 궁금합니다.
초코초코해 2025.06.18
프로그래머와 상의해 보시면 좋을 것 같아요 ㅎㅎ
제철 2025.06.18
이미지 크기는 서버에서 조정하는 방법이 편할 수 있어요. PHP라면 이미지 리사이즈 함수를 활용해 일정 크기 이상일 때만 줄일 수 있습니다.
참이삭 2025.06.18
그런 문제는 개발 단계에서 썸네일로 처리하는 방법도 있지 않나요?
핫레드 2025.06.18
게시판 내용의 이미지 태그 크기를 확인해서 기준보다 크면 화면에 표시될 때 크기를 줄이도록 스크립트로 처리하고 있어요.
삐용삐용 2025.06.18
저도 `overflow: hidden`을 쓰지만, 가능하면 디자인 수정도 요청해 봐요. 상황에 따라 쉽지 않더라고요.
상큼한캔디 2025.06.18
답변 감사합니다.
동은 2025.06.18
게시판이라면 GD 라이브러리 같은 도구로 업로드 이미지를 자동 리사이즈하는 방법이 편해요.
업로드할 때 자동으로 줄여주는 기능을 두거나, 어려우면 `overflow: hidden`이나 화면 크기 조정을 적용할 수 있습니다.
줄인 이미지를 누르면 팝업으로 원본을 보여주는 방식도 괜찮아요.
뽀야 2025.06.18
`overflow: hidden`이나 강제 리사이즈 모두 원본이 그대로 보이지 않는 점은 비슷하네요. 어떤 방식을 쓸지는 기획 쪽에서 정해야 할 것 같아요.
해사랑해 2025.06.18
`word-break`는 익스플로러 전용 속성이라 말씀하신 상황에서는 해결이 쉽지 않아요. 가로 폭을 고정해야 한다면 `overflow: hidden`을 고려해 보세요.