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

尝试将网站背景幻灯片置于页面中心-水平居中即可。完全居中，保持纵横比和自动拟合将是惊人的

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

HTML（有问题的部分）

从理论上讲，这应该使图像居中，并将其缩放到任何大小，达到屏幕边缘的最大宽度/高度点。您可以删除“最大宽度”和“最大高度”以防止出现这种情况

要启用垂直居中，您可能需要一些js

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

---

注意：我不确定你的幻灯片是如何工作的，这只是一个假设的例子。fadein img是唯一一个包含该类和图像的图像。您必须将其调整到您的设置。

是否保持图像的纵横比？你现在有一个固定的尺寸，这就是你想要的吗？它本身不是固定的尺寸。fadein img有100%的高度和自动宽度。理想情况下，它将居中于页面并自动调整大小，如果图像边缘离开页面，则可以。如果不可能，我将采用水平居中；）所以我们可以忽略320px？你想让图像占据整个窗口？对，这似乎在幻灯片代码中，但另一部分告诉图像如何占用空间。你是对的，这是fadein类的唯一图像。不幸的是，这并没有解决我的问题。我会继续的。只要css，它应该水平居中，它至少能做到这一点吗？（您可能需要重新添加z索引）

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

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