헤더 높이를 배경 이미지 높이에 의존하는 방법은 무엇입니까?

Question

답변을 꽤 오래 찾으려하지만 검색 바에 질문을 표현하는 방법을 모르겠다 - 여기에서 설명하려고 노력할 것입니다. 이미 답변을 받았음을 알고 있으면 링크에 만족할 것입니다 :)

나는 밑줄 프레임 워크를 사용하여 WordPress 테마를 만들고 있습니다. 내 머리글을 배경 이미지 높이에 의존하게하고 싶습니다. 제 말은 - 어떤 크기의 이미지라도 업로드 할 수 있으며 헤더의 너비는 이미지의 100 %가되고 높이는 화면 크기에 따라 동적으로 변경됩니다. 이미지에 allways 완전히 표시되고 헤더 변경의 높이 - http://hitchdiary.cz/

봅니다 창의 크기를 변경하려면 : 상상력

더 나은, 여기에 예입니다.

그래서 내가 원하는 것입니다. 내가 가지고있는 것은 정적 크기 헤더이고 배경 이미지는 화면 크기에 따라 조정됩니다.

.site-header {    
    height: 100%; 
    width: auto; 
    background-color: #000; 
    background-size: 100%; 
} 

머리말 이미지는 워드 프레스 조정 섹션에서 사용자가 설정합니다. 코드에서이 방법은 다음과 같습니다.

<?php if (get_header_image()){ ?> 
      <header id="masthead" class="site-header" style="background-image: url(<?php header_image(); ?>)" role="banner"> 
    <?php } else { ?> 
      <header id="masthead" class="site-header" role="banner"> 
    <?php } ?> 

어떤 조언 주셔서 감사합니다. 미안하다. 나는 꽤 초보자입니다.

NOW 무슨 일

:

demo

Answer 1

을 높이는 DIV의 내용에 따라 자동으로 산출된다. 100 %로 설정하면 상위 컨테이너의 높이를 가져 오라고 말합니다.

높이를 자동으로 설정하면 문제가 해결됩니다.

.site-header {    
    width: auto; 
    background-color: #000; 
    background-size: 100%; 
} 

or 

.site-header {    
    height: auto; 
    width: auto; 
    background-color: #000; 
    background-size: 100%; 
} 

유연한 폭

죄송하지만 지금은 유연한 너비 대신 높이로 착각. 이 문장 아래에 오는 것을 무시하십시오. 그러나 미래의 너비 조정에 도움이 될 수 있습니다.

기본적으로 div, header, footer 등은 블록 요소입니다. 부모 div의 100 %를 차지합니다.

는 내부 사업부뿐만 아니라 500 픽셀을 차지 여기

<div class="parent" style="width:500px;"> 
    <div class="child"> </div>  
</div> 

말해봐.

비슷한 코드를 사용해 보았습니다. 인라인으로 설정해야합니다.

.site-header { 
    display: inline; 
} 

인라인으로 만들면 왼쪽/오른쪽으로 플로트 해보세요. 작동하지 않습니다.

당신은 block and inline