DIV가 내용보다 왜 작습니까?

Jonathan Raasch가 게시 한 Simple jQuery Slideshow을 수정하려고합니다.DIV가 내용보다 왜 작습니까?

모든 이미지가 서로 번갈아 가며 흐리게 표시됩니다.

350px square image in a 350px height DIV container http://img154.imageshack.us/img154/904/fixed.jpg

그의 예는 고정 된 크기의 이미지와 함께 작동합니다. 대신 브라우저 윈도우의 백분율 너비 크기의 이미지로 작업하고 싶습니다.

이 고정 된 크기의 이미지와 함께 작동 ...

#slideshow { 
    ... 
    height:350px; 
} 

#slideshow img { 
    ... 
}

내가 그것을 변경하는 방법이 ...

#slideshow { 
    ... 
} 

#slideshow img { 
    ... 
    width: 50%; 
}

를 변경할 수 없기 내가 더 이상 명시 적으로 DIV의 높이를 설정하지 해요 "슬라이드 쇼"는 0으로 축소됩니다. 그러면 이미지가 내 텍스트를 덮습니다. 비교 ...

50% wide image in a zero height DIV container (overlaps text) http://img253.imageshack.us/img253/6016/variable.jpg

이것은 CSS와 자바 스크립트를 포함하여 내 모든 HTML 파일 ...

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xml:lang="en"> 
    <head> 
     <title></title> 
     <style type="text/css"> 

      #slideshow { 
       position:relative; 
       height:350px; 
      } 

      #slideshow img { 
       position:absolute; 
       top:0; 
       left:0; 
       z-index:8; 
      } 

      #slideshow img.active { 
       z-index:10; 
      } 

      #slideshow img.last-active { 
       z-index:9; 
      } 

     </style> 
     <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> 
     <script type="text/javascript"> 

      function slideSwitch() { 
       var $active = $('#slideshow img.active'); 
       if ($active.length == 0) $active = $('#slideshow img:last'); 
       var $next = $active.next().length ? $active.next() 
        : $('#slideshow img:first'); 
       $active.addClass('last-active'); 
       $next.css({opacity: 0.0}) 
        .addClass('active') 
        .animate({opacity: 1.0}, 1000, function() { 
         $active.removeClass('active last-active'); 
        }); 
      } 

      $(function() { 
       setInterval("slideSwitch()", 5000); 
      }); 

     </script> 
    </head> 
    <body> 

     <div id="slideshow"> 
      <img src="img/img1.jpg" alt="" class="active" /> 
      <img src="img/img2.jpg" alt="" /> 
      <img src="img/img3.jpg" alt="" /> 
     </div> 

     <p>Lorem ipsum ...</p> 

    </body> 
</html>

이유는 그 내용보다는 내 DIV 작은? DIV 높이를 내용 높이와 어떻게 일치시킬 수 있습니까?

출처

2009-04-03 Zack Peterson

절대 위치 지정은 이미지 위에 텍스트가있는 이유입니다 (아무것도 제공하지 않으므로 #slideshow <div>에 아무런 높이도 표시되지 않음). 슬라이드 쇼의 경우 이미지를 절대적으로 배치해야 시스템에서 이미지를 배치해야합니다 효과. 어쨌든 jQuery를 사용하고 있기 때문에 프로그래밍 방식으로 컨테이너 <div>을 가장 큰 이미지의 높이까지 확장 할 수 있습니다.

var maxHeight = 0; 
$("#slideshow img").each(function(){ 
    if (maxHeight < $(this).height()) {maxHeight = $(this).height()} 
}); 
$("#slideshow").height(maxHeight);

누군가가 스크립트의 maxHeight 부분을 작성하는 좀 더 우아한 방법을 지적 할 수 있습니다.

출처

2009-04-03 18:02:32

고맙습니다. CSS 전용 솔루션은 좀 더 우아하게 느껴지 겠지만 완벽하게 작동합니다. –

이미지의 위치를 절대로 설정하면 문서의 흐름 (나머지 텍스트가있는 위치)에서 이미지의 위치가 제거되고 맨 위에 놓입니다.

편집 : 자세한 당신이 원하는 것처럼 아마도

 #slideshow { 
      position:relative; 
      height:1000px; 
     } 

     #slideshow img { 
      position:absolute; 
      width: 50%; 
      top:0; 
      left:0; 
      z-index:8; 
      display: none; 
     } 

     #slideshow img.active { 
      z-index:10; 
      display: inline; 
     } 

     #slideshow img.last-active { 
      z-index:9; 
      display: inline; 
     }

그건 :

나는에 CSS를 조정. 대량 콘텐츠와 일치하는 정상적인 높이를 찾아야하지만,주기가 끝났을 때 최소한의 "터지는"상태에서 사진을 페이드 인/페이드 아웃하는 것처럼 보입니다.

출처

2009-04-03 17:02:59 BonkaBonka

그냥 추가하면 이미지에 위치를 지정할 수 있습니다. 상대적이며 CSS (이미 가지고있는 이미지)와 Z 축의 왼쪽 위 위치를 지정하는 한 여전히 잘 작동해야합니다. 색인. 상대적 위치와 절대 위치는 실제로이 점에서 모두 다르지 않습니다. – KyleFarris

설정 #slideshow img {위치 : 상대적; ...}는 동시에 세 개의 이미지를 모두 표시합니다. –

저는 DIV "슬라이드 쇼"의 높이를 명시 적으로 설정하지 않으려 고합니다. –

DIV가 내용보다 왜 작습니까?

답변

관련 문제