슬라이드 쇼를 채우기 화면 크기 조정

나는 자동 슬라이드 쇼로 사진 웹 사이트를 구축 중입니다.슬라이드 쇼를 채우기 화면 크기 조정

슬라이드 쇼의 크기가 브라우저 크기에 맞게 조정되어 위 또는 아래에 공백을 두지 않고 화면을 채우려 고합니다.. 화면이 이미지의 비율에 맞지 않으면 이미지를 확대해야합니다 (사용자가 아이폰과 같은 장치에 있으면 이미지가 제대로 채워질 수 있습니다).

예를 들어 this website을 참조하십시오. 화면을 90도 회전하면 이미지가 확대되고 화면 중앙에 채워져 여전히 화면을 채 웁니다.

이것은 현재 가지고있는 슬라이드입니다 (슬라이드 쇼 방법을 변경해야하는 경우). 이 심하게 내용의 질문이 나는 말이없는 경우 경우

HTML + (머리에) 자바 스크립트

... 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
    <script> 
     $(function() { 

      $("#slideshow > div:gt(0)").hide(); 

      setInterval(function() { 
       $('#slideshow > div:first') 
       .fadeOut(1500) 
       .next() 
       .fadeIn(1500) 
       .end() 
       .appendTo('#slideshow'); 
      }, 5000); 

     }); 
    </script> 

</head> 

<body> 
    <div id="slideshow"> 
     <div> 
      <img src="images/slide1.jpg"/> 
     </div> 
     <div> 
      <img src="images/slide2.jpg"/> 
     </div> 
     <div> 
      <img src="images/slide3.jpg"/> 
     </div> 
    </div> <!-- end slideshow --> 
</body>

CSS 미리

#slideshow { 

    position: relative; 

    width: 100%; 

} 

#slideshow > div { 

    position: absolute; 

}

감사하고 죄송합니다.

키에 란

출처

2014-03-30 Kieran Nolan

IMG는 절대 만들 사업부는 절대하지 마십시오. 당신이 잘못 가고있는 곳. 그것은 전체 화면을 것이다 그래야
또한 100 %로 이미지를 만들

CSS :

body{ 
padding:0;//so that there is no white space 
margin:0; 
} 
#slideshow { 
    display:block; 
    position: relative; 
    width: 100%; 
} 
#slideshow > div > img{ 
    display:block; 
    width:100%; 
    max-width:100%; 
    position:absolute; // here make it absolute 
} 
#slideshow > div { 
position:relative; // make it relative not necessary actually 
}

JS FIDDLE DEMO

출처

2014-03-30 08:13:04

의미가 아이 : 그를 삭제 주셔서 감사합니다 –

슬라이드 쇼를 채우기 화면 크기 조정

답변

관련 문제