기본 콘텐츠로 건너뛰기

라벨이 img인 게시물 표시

html/CSS 구글블로그 본문 이미지 늘어짐 현상 해결

무료 스킨을 다운받아서 사용하다 보니 이래저래 불편한점이 많네요. 특히나 구글 블로그는 직접 손대야 할 부분이 많아서 어려운 거 같습니다. 구글 블로그 제작자에게 물어봐도 대응을 안 해줍니다. 대부분 무료 스킨은 서포트를 안 해줍니다. 아쉬우면 구매하라는 것이죠. 그렇다고 포기할 제가 아니죠. 📜목차 1. 모바일에서 이미지가 늘어짐 2. 해결방법      2.1. 모바일 이미지 늘어짐 수정      2.2. 이미지 가장자리 둥글게 하기      2.3. 이미지 복사 금지 1. 모바일에서 이미지가 늘어짐 저의 문제는 모바일 화면에서 이미지가 늘어져서 나오는 것이었습니다. PC 화면에서는 괜찮은데 유독 스마트폰 화면에서는 아래 사진처럼 이미지가 너무 길쭉하게 나옵니다. 모바일에서-이미지-늘어짐 일부러 구매하라고 이런 버그를 하나씩 숨겨뒀을 거란 생각이 드네요. 찾아보니 제가 사용하고 있는 스킨의 본문 이미지의 코드는 아래와 같이 설정이 되어 있습니다. .post-body는 블로그의 본문을 뜻합니다. img는 이미지구요. 초기 설정은 너비를 100%로 하라고만 설정되어 있네요. .post-body img {max-width:100%} 2. 해결방법 이것저것 바꿔보면서 결국 성공했습니다. 최종적으로 저는 아래와 같이 수정했습니다. .post-body img {max-width:100%; height: auto; border-radius:10px; pointer-events: none;} 2.1. 모바일 이미지 늘어짐 수정 기본값에...