[Tistory] 다중 이미지(이미지 슬라이드, 콜라주 등) 본문 폭에 맞추기 [HELLO 스킨 게시글 이미지 리사이징하기]

- 다중 이미지(이미지 슬라이드, 콜라주 등) 본문 폭에 맞추기

지난 게시글들을 둘러보다가, 리사이징이 풀린 이미지를 보게 되었다.

리사이징 분명 해줬는데 이것은 왜 풀린 것인가

 

태그를 분석해보니 아래와 같았다. 인라인 스타일이 강하게 먹혀 있던 것!

이미지가 여러 장일 경우, 'imagegridblock' 클래스를 갖고 있는 figure 태그로 감싸진다.

---

자바스크립트나 제이쿼리 등으로 처리해보려 했는데 실패하고..
눈에는 눈, 이에는 이니까 CSS를 건드리기로 했다.

/* 최신버전(4.10.3) */
figure.imageblock.alignCenter {
  width: 100% !important;
}

/* 구버전 */
figure.imagegridblock {
  width: 100% !important; margin-left: auto !important;
}

---

아주 깔끔하게 다중 이미지 리사이징 성공!

---

- HELLO 스킨 개발자의 의도

본문 밖으로 이미지가 나간 것은 개발자의 의도였던 것! 버그가 아니다~

---

수평으로 이미지 2개 있을 때, 본문 영역을 벗어나는 현상 · Issue #34 · tistory-projects/tistory-skin-hELL

---

- 단일 이미지를 본문 폭에 맞춰 리사이징하고 싶다면?

[Tistory] 티스토리 게시글 이미지 본문 폭에 맞추기 [HELLO 스킨 게시글 이미지 리사이징하기]

---