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是唯一具有该类和图像的图像。您必须根据您的设置进行调整。

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

1 个答案: