본문 이미지를 글자와 개별로 여백을 지정하고싶습니다.


안녕하세요 해시코드 여러분 몇가지 도움을 얻고싶어 이렇게 질문을 올립니다.

티스토리 플랫폼에서 스킨을 제작하고있는데, 본문에 이미지가 작은화면에서는 너무나도 작게보여 본문 텍스트와 개별로 여백을 없에고, 가득채우고 싶습니다.

이미지

요약해서 얘기하자면, 본문 텍스트는 Padding(?)을 유지한채 이미지는 Padding에 간섭받지 않았으면함니다.

position: absolute; 를 사용했지만 이건 본문 순서배열을 무시하고 절대위치를 가지는것이기 때문에 해결할 방법이 떠오르지 않더군요

이미지만 따로 100% 가득채울수 있는 방법이 없을까요?

*참고로 얇은 회색선까지만 가득채우고 싶습니다.

  • 2017년 12월 12일에 작성됨

조회수 223


Banner nodejs

1 답변


좋아요
1
싫어요
채택취소하기

viewport랑 margin을 사용하면 할 수 있습니다. 왠만하면 container는 따로 가는게 좋을 듯합니다 ㅎㅎ

demo 링크 : https://jsfiddle.net/inkyu/fw9bxtdf/2/

  • 2017년 12월 12일에 작성됨
    프론트앤드, 임베디드 초보개발자입니다.

  • 안녕하세요 성실하지 못한답변에 한인규님의 좋은답변 감사합니다.     suk9206   2017.12.16 10:32     
  • 예제를 통해서 더욱더 이해에 도움이되었습니다, 몇가지 문제사항이있습니다, http://suk9206.tistory.com/896#gsc.tab=0 해당 사이트는 제가 도움을 요청해 수정하려던 블로그입니다, 주신대로 적용을 시켜보았지만 이미지가 잘리면서 한쪽으로 몰립니다, 브라우저 창크기 500px 이상에서는 해당 문제가 안보이도록 처리해두었으니 문제를 확인하실경우에는 브라우저 크기를 500px 이하로 맞춰서 해당 URL 페이지를 봐주시길 바랍니다, 예제를 보았을때 문제해결이 될것같아 죄송하게도 또다시 질문드립니다.    suk9206   2017.12.16 10:36     
  • 도움이 되실지 모르겠지만 .post-content img{ position: relative; width: 100vw; margin-left: -50vw; left: 50%; } 적용한 css 소스입니다    suk9206   2017.12.16 10:39     

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close