Question

我有一个自动幻灯片，我想让所有图像水平和垂直填充到div。目前，他们都是不同的大小，他们溢出div;他们似乎忽略了我给他们的尺寸。当它正常工作时，我想将它放在导航栏下方的网站上，占据页面的一半左右。 h1标签也应该在图片下方，但它位于图片下方，所以不确定那里发生了什么。我以前从未尝试过这样的事情，所以任何帮助都是非常感激！这可能是我在某个地方遗漏的简单事情。

我已附加Codepen以显示问题：https://codepen.io/Macast/pen/JpKvOq

HTML：

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="pageContainer">
  <div id="slideshowContainer">
    <div class="fadein">
      <img src="https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg">
      <img src="https://wallpaperbrowse.com/media/images/6986083-waterfall-images_Mc3SaMS.jpg">
      <img src="https://wallpaperbrowse.com/media/images/road-dawn-mountains-sky.jpeg">
    </div>
  </div>
</div>

<h1>Testing</h1>

</html>

CSS：

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

#pageContainer {
  width: 100%;
  height: auto;
}

#slideshowContainer {
  width: 100%;
}

.fadein {
  position: relative;
}

.fadein img {
  position: absolute;
  left: 0;
  top: 0;
}

JS：

$(function() {


$(".fadein img:gt(0)").hide();
  setInterval(function() {
    $(".fadein :first-child")
      .fadeOut()
      .next("img")
      .fadeIn()
      .end()
      .appendTo(".fadein");
  }, 3000);
});

Answer 1

您的CSS以100％宽度.fadein img提供#slideshowContainer绝对定位。您需要指定容器大小并设置为overflow: hidden;

替换你的CSS：

#slideshowContainer {
  width: 800px;
  height: 400px;
  overflow: hidden;
}

.fadein img {
  width: 800px;
  height: auto;
}

Answer 2

这似乎可以解决您的问题：

.fadein img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}

对于H1文本：

h1{
  position:relative;
  z-index:1;
}

如何获取图像来填充div？

2 个答案: