세로형 사진이나 영상 본문 가득채워서 보기 안좋은 증상

"글쓰기 에디터 상에서 세로 이미지나 동영상이 첨부 되었을때 비율을 적절하게 업로드될 수 있게 설정"하는 게 요지인 것으로 이해했습니다.
그러려면 비디오 파일 첨부시에 source_filename이나 mime_type외에 width와 height도 확인이 되어야 할 텐데요.
파일 업로드 ajax 통신 중 (이미지 파일 외에) 동영상 파일에서 width와 height 값을 반환해주는 것 같지는 않습니다.
(db에 기록될 때도 width와 height 컬럼 값은 null 처리되는군요)

php에선 MP4Info라는 라이브러리가 있었던 것 같구요. (근데 서버 부하가 좀 있을지도 모르겠어요)

js에서 html5 비디오라면 비디오의 가로세로 비율을 구해서 파일 업로드 콜백함수에 끼어드는 것도 방법이지 않을까 싶습니다. (참고 : https://stackoverflow.com/questions/4129102/html5-video-dimensions#answer-4129189)

첨부하신 나무늘보 사진은 XE타운의 본문 영역보다 훨씬 넓은 이미지인데, 본문 영역 폭에 딱 맞추어서 표시되지요? 라이믹스에서 본문 내의 모든 이미지에 max-width: 100%; 속성을 적용했기 때문입니다. 이 상태에서 height를 별도로 지정하지 않으면 높이는 비율에 맞추어 자동 조정되고요.

 

마찬가지로, 스킨이나 레이아웃에서 본문 내의 이미지나 동영상에 max-height: 100vh; 속성을 적용한다면 화면 높이를 초과하지 않도록 축소할 수 있습니다. 물론 좌우 너비은 본문 폭보다 더 좁아지겠지요.

 

사이트에 따라서는 고정된 헤더나 푸터 때문에 실제로 이미지를 볼 수 있는 영역이 100vh보다 더 좁을 수도 있습니다. 이럴 때는 max-height: calc(100vh - 80px); 등으로 필요한 만큼 더 줄이도록 하면 됩니다.

 

에디터 내에서도 마찬가지입니다. 물론 에디터를 전체화면으로 띄우는 사이트는 거의 없기 때문에, 사진 높이가 300px만 넘어가도 에디터 영역을 가득 채워버리기 일쑤이지요. 어쨌거나 원본 사진/영상의 가로세로 크기는 알 필요도 없고 사용해서도 안 됩니다. HTML 소스상에서 width와 height를 강제 지정해 버리면 추후 레이아웃이나 스킨을 변경했을 때 유연하게 대응할 수 없으니까요. 별도의 CSS로 처리하는 것을 추천합니다.