질문/공유질답게시판

모바일 외부이미지 리사이즈 관련해서 궁금한게 있습니다.

배웁
Extra Form
PHP PHP 7.3
CMS XpressEngine

프로그래밍 관련해선 완전 까막눈이라 검색으로 많은 도움 받고 있습니다. 

 

그런데 이것저것 검색해서 적용해봐도 해결이 안되는 부분이 있어서 질문 드립니다.

 

 

글을 쓸때 외부 이미지를 url로 첨부하는 경우 모바일에서 가로 길이는 기기에 맞게 변경되나,

 

세로 길이는 그대로라서 이미지가 세로로 길게 늘린 모습으로 나타납니다.

 

 

여기저기 검색해서 알아본 결과, 이미지 내에 가로, 세로 넓이가 고정으로 적용되어 있어서 그렇다고 하더라구요.

 

<p><img alt="" src="https://www.example.com/upload/2019/02/content/021015/20190202-gowon1jpg.jpg" style="width: 1000px; height: 701px;" /></p>

 

그래서 소스보기를 통해 해당 이미지의 style="width: 1000px; height: 701px;" 부분을 지워주니 정상적으로

 

가로 길이에 맞춰 세로 길이도 조정이 됐습니다.

 

 

그런데 제가 궁금한건 이런 작업을 글을 쓸 때마다 매번 해야만 하는 건가요?

 

저 혼자 운영하는 블로그라면 모르겠지만, 다른 회원들에게 일일히 소스 수정하라고 요청할 수가 없어서요.

 

 

코드 수정이나 애드온으로 조절하는 방법이 있을까요?

 

본문내 이미지 조절 애드온은 이미 사용 중인데 적용이 안되네요... ㅠㅠ 

 

 

 

위로 아래로
댓글 11
  • ?
    css img 태그에 width, height 넣어주면 자동으로 변환됩니다
    근데 이렇게 하면 불필요한 트래픽을 낭비하게 되니, 이미지 프로세스 모듈 사용해보세요
    https://xe1.xpressengine.com/index.php?mid=download&package_id=22753726
  • ? ?
    소중한 답변 감사드립니다. 시도해보겠습니다
  • ? ?
    gd라이브러리보다는 imagemagick 사용하시는걸 추천드립니다.
  • ? ?
    의견 감사합니다. 그런데 모듈을 깔아서 적용해봐도 그대로네요... ㅠㅠ

    가로크기는 폰크기에 맞게 잘 줄어드는 걸로 봐선 쉽게 해결할줄 알았는데 계속 안 풀리니 갑갑합니다.

    답변 감사드립니다.
  • ? ?
    외부 이미지 링크라면 css 로 조절하셔야 할 것 같습니다
  • profile

    .xe_content img {max-width: 100%;};

    이것을 레이아웃 혹은 게시판스킨의 스타일시트에 추가하시거나...
    잘 모르시겠으면 레이아웃 편집 들어가셔서 소스 제일아래 아무곳에나

    <style>
    .xe_content img {max-width: 100%;};
    </style>

    를 넣어주세요...

     

    TMI
    원리는 XE나 라이믹스의 글읽기 화면은 xe_content 라는 div 클레스명으로 정의가 되어 있는데
    이 xe_content 라는 이름을 가진 요소의 하위 img태그의 최대 넓이를 100%로 고정한다는 의미 입니다.

     

    반대로 

    <style>.xe_content img {min-width: 100%;};</style>

    이라고 작성하시면 게시글 안의 이미지는 모두 본문에 꽉차게 들어가겠지요

  • profile ?

    답변 감사드립니다.

    그런데 이미 가로길이는 적절하게 리사이즈가 되고 있습니다.

    문제는 세로 길이가 가로길이에 맞춰 줄어들지 않다보니, 위로 길게 늘인 이미지가 되버립니다.


    그냥 첨부 방식으로 업로드하거나, 외부 이미지여도 작성자가 모바일에서 업로드할 경우엔 문제가 없지만

    pc에서 외부 이미지를 업로드한 경우, 다른 회원들이 그 이미지를 모바일로 봤을때

    세로로 길게 늘인 이미지가 나타납니다.


    소중한 의견 감사드립니다.

  • profile
    js로 핸들링하는 게 나을 것 같은데요.
    일괄적인 방법이다보니 높이가 지정되어야만 하는 다른 요소들에 영향을 줄 수도 있겠지만요.

    jQuery('.xe_content img').css({'height': 'auto'});
  • profile ?
    와 정말 감사합니다. 하루종일 끙끙 거렸던게 확 풀리네요. 해결 됐습니다 감사합니다 ㅠㅠ

    다른 요소들이라고 하신건 로고나 썸네일 같은 이런 사이트 내 모든 이미지에 적용된다는 말씀이신가요?
  • ? profile
    아뇨, 일단은 본문 내 이미지에 국한되니까 본문 바깥에는 영향을 주지 않을 겁니다.
    다만 일부 회원들의 경우엔 이미지 세로 사이즈를 특정하고 싶을 수 있잖아요.
    근데 이제는 그런 게 불가능하게 되는 거죠ㅎㅎ
  • profile ?
    네 그 부분은 제가 잘 안내를 하면 될거 같네요.

    감사합니다. 덕분에 이제 다음 단계로 넘어갈 수 있을거 같습니다. 감사합니다.