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

Center background slideshow autofit maintain aspect ratio

本文关键字：调整 背景 幻灯片      更新时间：2023-09-26

尝试让网站背景幻灯片以页面为中心-水平居中即可。完全居中、保持纵横比和自动调整将是令人惊叹的。

我的编码能力很原始，所以我一直在把我能找到的模板和幻灯片编码拼凑在一起。目前，幻灯片在我的图形和按钮后面播放得很好，但它是向左对齐的，我能想到的最好的是下面。。。

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

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

相关文章：