CSS 이미지 이스케이프 부모

Question

나는 반응 형 디자인을 배우려고하고 있으므로 튜토리얼을 다룰 준비가되어 있습니다. 창 크기가 줄어들 때 내 배너 이미지가 배너 div를 벗어나고 오른쪽의 크기가 올바르게 조정되지 않습니다. 나는 그것을 배너 div에 적용되는 스타일링으로 좁혔지만, 내 삶에 대해 알아낼 수는 없다. 내 코딩의 어떤 부분에서 그렇게 할 수 있습니까?

라이브 버전은 여기에서 볼 수있다 : http://ctxdesigns.net/nelson/

크롬에 따르면,이 당신은 문제가 100 % 사업부에 1 % 패딩을 추가

-webkit-background-clip: border-box; 
-webkit-background-origin: padding-box; 
-webkit-background-size: auto; 
background-attachment: scroll; 
background-clip: border-box; 
background-color: rgb(255, 255, 255); 
background-image: none; 
background-origin: padding-box; 
background-size: auto; 
border-bottom-color: rgb(0, 0, 0); 
border-bottom-style: none; 
border-bottom-width: 0px; 
border-image-outset: 0px; 
border-image-repeat: stretch; 
border-image-slice: 100%; 
border-image-source: none; 
border-image-width: 1; 
border-left-color: rgb(0, 0, 0); 
border-left-style: none; 
border-left-width: 0px; 
border-right-color: rgb(0, 0, 0); 
border-right-style: none; 
border-right-width: 0px; 
border-top-color: rgb(0, 0, 0); 
border-top-style: none; 
border-top-width: 0px; 
display: block; 
float: left; 
font-family: 'Times New Roman'; 
font-size: 16px; 
font-style: normal; 
font-variant: normal; 
font-weight: normal; 
height: 500px; 
line-height: normal; 
margin-bottom: 0px; 
margin-left: 0px; 
margin-right: 0px; 
margin-top: 0px; 
padding-bottom: 9.796875px; 
padding-left: 9.796875px; 
padding-right: 9.796875px; 
padding-top: 9.796875px; 
vertical-align: baseline; 
width: 980px; 

Answer 1

을 #banner에 적용되는 무슨이다 (당신이 오른쪽에서 왼쪽에 1 %를 추가하고 있기 때문에 98 % 할 필요) :

#banner { 
background: white; 
display: block; 
float: left; 
padding: 1%; 
height: auto; 
width: 98%; 
} 

:

을이 작업을 수행

정확합니다. 당신이 100 %에 배너를 유지하기 위해 필요한 경우 패딩을 가지고 내부 사업부를 추가

..

Answer 2

기본 CSS 박스 모델이 같은 크기 정의

패딩, 테두리 및 여백은 너비가 인 위에 이 추가됩니다. 따라서 최종 너비는 width = width + padding + border으로 끝나고 여백이 추가됩니다.

는 그래서 최종 폭은 102 % (+ 1 % + 1 % 100 %) 인 끝

#banner { 
    width: 100%; 
    padding: 1%; 
} 

설정할 때.

일부 사람들은 이것이 비 직관적이라고 생각할 수도 있습니다. 고맙게도, 당신은 box-sizing propety를 사용하여이를 수정할 수 있습니다. border-box으로 설정하면 원하는 크기로 조정할 수 있습니다. 바깥 쪽이 아닌 안쪽 여백과 테두리를 밀어 넣습니다. 따라서 가지고 있다면,

#banner { 
    width: 100%; 
    padding: 1%; 
    box-sizing: border-box; 
} 

너는 100 % 너비이지만 내부에는 1 %의 여백이 있습니다.

box-sizing은 IE 7 이하를 대상으로하지 않아도 브라우저가 상당히 양호합니다.

상자 크기 조정을 사용하려는 경우 many would advocate 전역 선택기를 설정하여 모든 요소에 box-sizing: border-box을 적용하십시오.

*, *:before, *:after { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}