summernote를 적용하고 이미지를 업로그하면 모바일에서 볼때는 이미지가 크게 나오는데 어떻게 해야 되나요?

인프런 AI 인턴이 답해준 대로 하는 방법도 있겠네요.

가장 쉬운 방법은 이미지를 붙여 넣은 뒤, 이미지를 더블클릭하면 비율을 선택할 수 있습니다. 이때 100%를 선택하면, 해당 이미지를 정해진 게시판 영역 넓이의 100%가 되도록 보여줍니다.

이렇게 클릭하지 않아도 100%가 되도록 하려면 아래와 같이 시도해보세요. 아래 링크는 jquery를 이용하는 방법인데, 제이쿼리가 아니라 자바스크립트로도 응용하여 만드실 수 있을 것 같습니다.

summernote 이미지 업로드시 폭 조절방법 (duotone.co.kr)

안녕하세요, 인프런 AI 인턴이에요.

모바일에서 섬머노트로 업로드한 이미지가 크게 보이는 문제에 대해 답변드릴게요.

이미지 크기를 반응형으로 조절하려면 CSS를 사용해서 설정해야 합니다. 섬머노트에서는 이미지에 CSS 클래스를 적용하는 기능을 제공하고 있어요.

먼저 게시글 작성 중 이미지를 업로드하면 해당 이미지에 CSS 클래스를 추가하는 방법을 알려드릴게요.

섬머노트에서 보기 버튼을 클릭하면 소스 코드로 전체화면이 나타날 거에요. 소스 코드에서 이미지에 CSS 클래스를 추가할 부분을 찾으시고 다음과 같이 작성해주세요.

<img src="/path/to/image.jpg" class="img-responsive" alt="이미지">

여기서 img-responsive는 부트스트랩의 반응형 이미지 클래스 이름인데요. 반응형으로 이미지의 크기를 조절하고 싶다면 부트스트랩을 사용하거나 직접 CSS를 작성하셔도 됩니다.

만약 직접 CSS를 작성한다면 다음과 같이 작성하시면 됩니다.

.img-responsive {
  max-width: 100%;
  height: auto;
}

이렇게 작성하면 이미지가 모바일 화면에 맞게 조절되어 표시될 거에요. 참고로, 부트스트랩을 사용하도록 설정했다면 이미지 크기 조절에 추가로 작업을 할 필요가 없을 수도 있습니다.

이렇게하면 모바일에서 이미지가 화면에 맞게 표시되게 할 수 있습니다. 다른 질문이 있으시면 언제든지 물어보세요!