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

조회수 1111회

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

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

이미지

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

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

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

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

  • (•́ ✖ •̀)
    알 수 없는 사용자

1 답변

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

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

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

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)