中心背景幻燈片自動調整保持高寬比

試圖讓網站背景幻燈片顯示中心到頁面 - 水平居中將是確定的。完全居中，保持寬高比和自動安裝將會非常棒。中心背景幻燈片自動調整保持高寬比

我的編碼功能是原始的，所以我一直在拼湊我已經能夠找到的模板和幻燈片編碼。目前，幻燈片播放揹着我圖形和按鈕就好了，但它是左對齊，我可以計算最好的是以下...

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; 
}

來源

2013-08-01 user2643219

保持圖像的寬高比？你現在有一個固定的大小，這是你想要的嗎？ –

本身不是固定大小，.fadein img具有100％的高度和自動寬度。理想情況下，它將以頁面爲中心並自動調整大小，如果圖像的邊緣離開頁面，則可以。 – user2643219

如果這是不可能的，我會採取水平居中;） – user2643219

.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 
});

注：我不確定你的幻燈片是如何工作的，這只是一個例子假設.fadein IMG是將內的類和圖像的唯一圖像。您將不得不根據您的設置進行調整。

來源

2013-08-01 19:43:38

你是對的，它是唯一一個帶淡色階層的形象。不幸的是，這並沒有解決我的問題。我會繼續努力的。 – user2643219

只用css它應該水平居中，至少是這樣做的嗎？（你可能需要重新添加你的z-index） –

這是我所有的... http：//truemotionworks.com/dev/index.html – user2643219

中心背景幻燈片自動調整保持高寬比

回答

相關問題