헤더가 모든 미디어에서 반응하도록하려면 어떻게합니까?

이미 입력 한 너비 : 100 %하지만 아무 것도 응답하지 않습니다. 헤더와 모든 브라우저 및 ipad, 전화 등에서 응답하려면 어떻게해야합니까?헤더가 모든 미디어에서 반응하도록하려면 어떻게합니까?

.head-wrap { 
background: url(http://envisionmediallc.com/prodigy/wp-content/uploads/2014/02/We-are-prodigy-dumbell-weight.jpg) top no-repeat; 
margin: 0; 
height: 480px; 
width: 100%; 
} 

.site-header { 
background: url(http://envisionmediallc.com/prodigy/wp-content/uploads/2014/02/Prodigy-Performance-we-are-prodigies4.png) no-repeat; 
margin: 0; 
width: 100%; 
height: 420px; 
} 

.site-header .wrap { 
padding: 16px 0; 
padding: 1rem 0; 
}

출처

2014-02-12 WsMom

관련 CSS 코드를 표시 할 수 있습니까? –

링크 대신 코드를 게시해야합니다. 그런 식으로 사이트가 다운되면 질문은 여전히 미래의 SO 사용자와 관련이 있습니다. –

너비에 백분율을 사용하면 알려진 부모 너비에만 상대적입니다. 헤더가 브라우저에서 크기를 변경하고 있지만 이미지의 크기가 축소되지는 않습니다. 정확히 무엇을 달성하려하는지 잘 모름 ... –

당신 (여기 참조 : https://developer.mozilla.org/en-US/docs/Web/CSS/background-size를) 100%; 당신은 어떤 브라우저 호환성 문제를 다루는이있을 수 있습니다 헤더의 background-size 스타일 설정을 시도 할 수 있습니다 당신은 또한 background-image 속성을 제거하고 내용을 채울 수

일반 img 요소와 절대 위치 지정을 사용하여 해당 img 요소를 너비 : 100 %로 설정합니다.

div도 420px 높이로 고정되어 있습니다. 420px의 최대 높이를 설정하고 height을 자동으로 설정하십시오 (https://developer.mozilla.org/en-US/docs/Web/CSS/max-height 참조)

배경이 겹치는 두 개의 배경 이미지를 같은 크기로 만들어야 할 수도 있습니다 (크기가 다르기 때문에 서로 다른 비율을 가질 수 있습니다. 너비/높이)를 사용하고 일부 미디어 쿼리를 사용하여 작업을 정리하면 100 % 작동합니다.

출처

2014-02-12 23:08:09

헤더가 모든 미디어에서 반응하도록하려면 어떻게합니까?

답변

관련 문제