반응 이미지 및 음수 여백

나는 패딩이있는 요소가있는 사이트가 있습니다. 패딩과 상관없이 이미지를 컨테이너의 전체 너비로 만들려면 패딩과 동일한 음수 여백을 추가하여 가장자리까지 오른쪽으로 늘리십시오. 문제는 반응 형 이미지를 사용할 때 발생합니다. 그들은 음수 마진을 무시하고 컨테이너 크기와 패딩에 찌그러 뜨립니다.반응 이미지 및 음수 여백

예 :이 잘 작동 응답이없는 세상에서

<article style="padding:20px"> 
<img style="margin:0 -20px;"> 
</article>

. 반응 형 이미지로 어떻게 이것을 달성 할 수 있을까요? 기사 태그를 닫고 다시 열 수 있다는 것을 알았지 만 실제 코드에 다른 문제가 발생하게되어 대안이되기를 바랍니다.

출처

2012-11-17 Ian Hoar

대부분 유일한 방법은 이미지를 div에 래핑하는 것입니다. CSS

article { 
    padding: 20px; 
} 
.img-wrapper { 
    margin: 0 -20px; /* minus left/right padding of article */ 
    text-align: center; /* center small images */ 
    line-height: 0; /* remove possible gap below image */ 
} 
.img-wrapper > img { 
    max-width: 100%; /* max-width now is relative to .img-wrapper */ 
    height: auto; /* to keep aspect ratio */ 
}

출처

2012-11-17 11:14:12

와

<article> <p>...</p> <div class="img-wrapper"> <img src="..." /> </div> <p>...</p> </article>

은 내가 OP 매우 유사한 질문을 막했지만, "이미 답이있을 수 있습니다 질문은"목록은 여기 저를 지적하고 있었다 정확하게 내가 필요. 고맙습니다 :) –

반응 이미지 및 음수 여백

답변

관련 문제