summernote를 적용하고 이미지를 업로그하면 모바일에서 볼때... - 인프런

Do It! 장고+부트스트랩: 파이썬 웹개발의 정석

django summernote 테마 적용하기

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

작성

706

안녕하세요.

섬머노트 적용하는 방법을 알려주셔서 게시판을 만들었는데요. 컴퓨터로 볼때는 이미지가 화면에 꽉 차게 나오던데요. 모바일로 게시판에 접속하면 이미지파일이 엄청 크게 나오더라고요.

이미지 크기가 변경이 안되고 그대로인것같은데요.

이미지도 반응형으로 만들려면 어떻게 해야 되나요?

검색하면 이미지를 반응형으로 만드는 방법이 있긴한데요. 섬머노트에는 어떻게 해야될지 모르겠더라고요.

화면이 작아지면 이미지 크기고 작아지게 할려면 어떻게 해야 되나요?

답변 2

지식공유자

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

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

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

안녕하세요, 인프런 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;
}

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

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