중앙 배경 슬라이드 쇼 자동 맞춤 유지 가로 세로 비율

Question

웹 사이트 배경 슬라이드 쇼를 중앙에 놓으려는 시도 - 가로 가운데 배치는 괜찮을 것입니다. 완전히 가운데로 맞추고 가로 세로 비율을 유지하며 자동 맞춤이 놀라운 것입니다.

코딩 기능이 원시적이므로 템플릿과 슬라이드 쇼 코딩을 함께 사용할 수 있습니다. 현재 슬라이드 쇼 ... 그러나 그것은 왼쪽과 내가 알 수있는 최선은 다음과 같다 정렬되어,

HTML (문제가되는 부분)

<div class="fadein"> <img src="images/1.jpg" alt=""> <img src="images/2.jpg" alt=""> <img src="images/3.jpg" alt=""> <img src="images/4.jpg" alt=""> <img src="images/5.jpg" alt=""> </div> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
$('.fadein img:gt(0)').hide(); 

setInterval(function() { 
$('.fadein :first-child').fadeOut() 
         .next('img') 
         .fadeIn() 
         .end() 
         .appendTo('.fadein'); 
}, 6000); // 6 seconds 
}); 
    </script> 

CSS를 내 그래픽과 버튼 뒤에 잘한다

.fadein 
{ 
    position: relative; 
    width: 320px; 
    height: 320px; 
} 

.fadein img 
{ 
    position: fixed; 
    width: auto; 
    height: 100%; 
    z-index:-1; 
} 

Answer 1

.fadein{ 
    position:fixed; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
} 
.fadein img{ 
    min-width:320px; 
    min-height:320px; 
    max-width:100%; 
    max-height:100%; 
    text-align:center; 
} 

이 경우, 이론 중심에서 이미지는 스크린의 에지를 타격 폭/높이의 최대 지점에 임의의 크기로 확장있다. 당신은 최대 너비와 높이를 제거 할 수 있습니다.

세로 센터링을 사용하려면 약간의 js가 필요할 수 있습니다.

$('.fadein img').css({ 
    'margin-top':($('.fadein').height()-$('.fadein img').height())/2 
}); 

참고 : 나는 슬라이드 쇼가 어떻게 작동하는지 확실하지 오전,이 IMG을 .fadein 가정 단지 예입니다 것은 내 클래스와 이미지를 가지고있는 유일한 이미지입니다. 설정에 맞게 조정해야합니다.