반응 형 이미지에서 이상한 패딩

Question

플로트 텍스트로 bilboard를 구현하려고합니다. , 스크린 샷을하시기 바랍니다 참고 : 내 HTML의 크기를 조정하면

div.hcenter { 
    margin-left: auto; 
    margin-right: auto; 
} 

.bilboard { 
    max-width: 1100px; 
    background-color: #cd1b31; 
    min-height: 205px; 
    height: auto; 
    width: 100%; 
    padding-top: 20%; 
    position: relative; 
    z-index: 0; 
} 

.bilboard .content { 
    margin-top: -20%; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
} 

.bilboard .content img { 
    width: auto; 
    height: 100%; 
    float: right;} 

.bilboard .imwrap { 
    float: right; 
    height: 100%; 
    background-color: yellow; 
} 

:

<div class="bilboard hcenter"> 
<div class="content"> 
    <div class="imwrap"><img src="img/dog.png" /></div> 
    <span>WE'RE THE SAME PASSIONATE PEOPLE</span> 
    <span>YOU KNOW AND LOVE</span> 
</div> 

그리고 CSS :

그래서, 어떤이에 대한 코드를 작성 파이어 폭스와 IE에서 나는 이상한 노란색을 참조하십시오 개에서 패딩 왼쪽 : 크롬에서

모두 좋다.

무엇이 내가 잘못 했습니까? 아니면 내 방식이 어리 석고 코드가 가장 간단할까요? 누군가가 코드 작성을 도와 줄 수 있습니까?

황색은 단지 쇼 문제입니다. imwrap 블록의 너비가 img보다 큰 경우

Answer 1

높이를 설정하면 문제가 발생할 수 있습니다. 필자는 아래의 JSFiddle에서이를 테스트했으며 정상적으로 작동하는 것 같습니다.

HTML

<div class="bilboard hcenter"> 
    <div class="content"> 
     <img src="http://upload.wikimedia.org/wikipedia/commons/e/e2/Bon_toutou.png"/> 
     <span>WE'RE THE SAME PASSIONATE PEOPLE</span> 
     <span>YOU KNOW AND LOVE</span> 
    </div> 
</div> 

CSS

div.hcenter { 
    margin-left: auto; 
    margin-right: auto; 
} 

.bilboard { 
    max-width: 1100px; 
    background-color: #cd1b31; 
    min-height: 205px; 
    height: auto; 
    width: 100%; 
    padding-top: 20%; 
    position: relative; 
    z-index: 0; 
} 

.bilboard .content { 
    margin-top: -20%; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
} 

.bilboard .content img { 
    max-height: 100%; 
    width: auto; 
    float: right; 
    background-color: yellow; 
} 

JSFiddle