如何获取图像以填充 div？答案

【问题标题】：How to get an image to fill a div?如何获取图像以填充 div？
【发布时间】：2018-02-05 23:57:08
【问题描述】：

我有一个自动幻灯片，我想让所有图像水平和垂直填充到 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);
});

【问题讨论】：

一些事情。首先，尝试考虑将淡入淡出动画移动到 CSS 而不是 jQuery。更快更流畅（在opacity 规则上使用transition）。其次，尝试将背景切换为background-image css 规则，将background-size 设置为cover。这将使 bg 图像适合其容器。第三，由于position: absolute 规则，图片覆盖了您的标题。
我尝试使用 css 过渡，但它们似乎有一种“弹出”或“爆炸”的风格逐渐消失。我是在交叉淡入淡出之后，jquery 似乎可以实现。
实现这一点的最佳方法是使用opacity: 0 css 规则隐藏所有图像，然后使用 JS 超时添加一个类（就像您所做的那样）覆盖该规则并设置 @ 987654334@。通过将这些元素上的transition 设置为opacity 0.5s 或all 0.5s，您将获得更平滑的结果，而成本（CPU 功率）的一小部分。
你可以编辑我的codepen吗？我不知道我会怎么做。这是我第一次尝试过这样的事情。 codepen.io/Macast/pen/JpKvOq
看看这个：codepen.io/anon/pen/QQExVP

标签： javascript jquery html css image

【解决方案1】：

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

在你的 CSS 中替换：

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

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

【讨论】：

这似乎运作良好，谢谢！溢出的东西：隐藏是它将主要显示图像的顶部并切掉一些底部。是否可以让图像垂直居中，从顶部和底部切掉一点？
再次尝试查看background-size: cover。我真的认为这就是你所追求的：css-tricks.com/almanac/properties/b/background-size
正如@Narxx 建议的那样，当应用于<div> 背景时，您可以更好地控制图像的位置。

【解决方案2】：

这似乎解决了您的问题：

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

对于 H1 文本：

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

【讨论】：