헤더 컨테이너가 이미지로 확장/축소됩니다.

저는 잠시 동안이 문제를 해결하기 위해 노력해 왔지만이를 무시했지만 지금은 수정해야합니다. 헤더가 크거나 작게 크기가 조정되면 머리글 이미지의 크기를 비례 적으로 변경하여 1024 이상의 모든 해상도에서 깨끗하게 보이도록합니다. 초기 버전에서이 작업을 수행했지만 코드를 수정하면 내 콘텐츠는 헤더 영역 뒤에 있습니다. 크기를 조정하고 전체 화면을 고칠 때도 콘텐츠가 머리글 뒤에 있습니다. 아! 그것은 두통입니다! 헤더 컨테이너가 이미지로 확장/축소됩니다.

http://jordan.rave5.com/tmpstuff/index.html

http://jordan.rave5.com/tmpstuff/index2.html (이 일이 제대로 크기를 조절 ...)

나는이 크기를 변경하기 위해 사용하고 있습니다 (이것은 내가 일하고 있어요 하나입니다)하지만 크기를 전환 할 수있는 이미지의 원인, 꼭 필요한 크기의 '팝'만이 아닙니다. 또한 요소가 갑자기 뜨는 것처럼 보이며 전체 화면으로 돌아갈 때 내용이 아래에 표시됩니다.

 // Control Shadow Size 
     $(window).load(function() { 

      var imageGrad = $('.image-grad'), 
       image = $('#header-image-border img'), 
       border = $('#header-image-border'), 
       grad = $('#header-image-grad'); 

      function resizeDiv() { 
       imageGrad.height(image.height()); 
       imageGrad.width($(window).width()); 
       grad.height(image.height()); 
       grad.width($(window).width()); 
       border.height(image.height()); 
       border.width($(window).width()); 
      } 

      resizeDiv(); 

      $(window).resize(function() { resizeDiv(); }); 

     });

출처

2013-04-28 WASasquatch

효과를 얻으려면 자바 스크립트가 필요하지 않습니다.

간단한 예 :

HTML :

<header> 
    <h1>Cats</h1> 
</header> 
<body> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum magnam eaque harum ullam earum accusantium praesentium quia a expedita voluptas inventore porro odit libero aliquid sunt culpa voluptatem! Nesciunt commodi?</p> 
    ... 
</body>

CSS :

header { 
    background: url("//placekitten.com/800/500") black; 
    background-size: 100% auto; 
    background-repeat: no-repeat; 
    padding: 15% 0; 
}

Demo

출처

2013-04-28 02:31:50 bookcasey

내 문제는 그 안에 포함 된 이미지는 JS 슬라이더이며 IMG 될 필요가있다 태그, 무언가가 헤더 이미지 테두리 및 헤더 이미지 그래디 나는 생각합니다. – WASasquatch

헤더 컨테이너가 이미지로 확장/축소됩니다.

답변

관련 문제