居中背景幻灯片自动调整保持纵横比

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

注意：我不确定您的幻灯片是如何工作的，这只是一个示例，假设 .fadein img 是唯一包含该类和图像的图像。您必须根据自己的设置对其进行调整。