본문에서 이미지는 화면에 꽉 차게 나오고 텍스트에는 padding 을
| CMS/프레임워크 | Rhymix 2.0 |
|---|---|
| 개발 언어 | PHP 7.4 |
모바일에서 볼때 이미지 양 옆으로 여백이 있는게 보기 싫어서
본문 영역 전체에 padding 이나 margin 을 0 으로 줬더니
텍스트 영역도 너무 가장자리에 딱 붙어 버려서 그것도 보기가 안좋더라구요
본문에서 이미지는 여백 없이 화면에 꽉 차게 만들고
텍스트 영역은 좌우에 padding 을 10px 정도 주려면 어떤식으로 해야 할까요
제가 생각해본건 CSS에서 본문 p 태그부분에 padding 을 10px 주고
게시글을 읽을때 img 요소의 상위 p 태그에 padding 0 을 주는 스크립트 이용하는거였는데
뭔가 다른 방법이 없을까요
댓글 4
글 작성시에는 항상 라이믹스기준으로 .rhymix_content 안에 들어가니까
.rhymix_content p 태그의 요소리스트를 가져와서 반복을 돌려서 그 안에 있는 img태그의 존재여부를 채크하면 됩니다. (찾을땐 jQuery의 find 함수를 사용하면 리스트를 가져올 수 있는것으로 보여집니다.)
반복을 돌릴때 반복 변수를 element으로 받아와서
if(element.find('img').length > 0) {
elemnt.removeCss~~ 어쩌구저쩌구
}
정확한 코드가 아니라서 정확한답은 아니겠지만.. 이런식으로 그 리스트들을 찾아서 지워주는 기능을 구현할 수 있습니다.
사진에 margin을 마이너스로 주어서 부모 태그의 padding을 상쇄하는 방법이 가장 간단하겠네요.
.rhymix_content { padding: 0 10px; }
.rhymix_content img { margin: 0 -10px; max-width: 100vw; height: auto; }
단, 부모 태그에 overflow: hidden; 이 설정되어 있는 경우 사진이 잘려 보일 수 있으므로
overflow 속성을 해제하거나, overflow-x만이라도 해제해 주어야 합니다.
알려주신 소스로 하니깐 잘 작동 되더군요 잉??
왜 그런가 찬찬히 봤더니 저는 max-width: 100% 만 알았는데 100vw 라는 방식이 있는걸 처음 알았습니다.
vw를 사용하니 잘 되네요! 감사합니다 ㅎㅎ