如何使图像适合简单的自动播放幻灯片？

Question

我的问题是关于将图像大小调整为一个部分，我认为这称为容器。有没有人碰巧知道如何做到这一点。 我已经包含了相关方面的代码。

HTML

<div id="slideshow">
            <div>
              <img src="Img1.jpg">
            </div>
            <div>
              <img src="Img2.jpg">
            </div>
            <div>
               <img src="Img3.jpg">
            </div>
         </div>

---

CSS

img {
  width: 100%;
  height: auto;
  display: block;
}

#slideshow {
  margin: 80px auto;
  position: absolute;
  top: 20%;
  left: 22%;
  width: 350px;
  height: 350px;
  padding: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

.slideshow {
  height: 300px;
  width: 300px;
}

#slideshow > div {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
} 

---

JS

<script src="jquery-1.8.3.js" type="text/javascript"></script>
        <script type="text/javascript">
        $(document).ready(function () {
        
        $("#slideshow > div:gt(0)").hide();

        setInterval(function() { 
        $('#slideshow > div:first')
            .fadeOut(1000)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo('#slideshow');
        },  3000);
        });
        </script>

Answer 1

首先，我爱你的精力充沛的人，太棒了。 :)

你离你想要的结果只有几行。

其中一个错误是您实际上并未将slideshow div 定位在css 中，而是将其定位为.slideshow，这是错误的，因为幻灯片是一个ID，所以您应该说#slideshow在你的css。

您要做的最后一件事是让您的图像始终完全适合您的容器，您可以使用 width : 100%; height: 100%; object-fit: cover; 来做到这一点

只需用这个替换您当前的css，它应该可以工作:)

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#slideshow {
  margin: 80px auto;
  position: absolute;
  top: 20%;
  left: 22%;
  width: 350px;
  height: 350px;
  padding: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

#slideshow {
  height: 300px;
  width: 300px;
}

#slideshow > div {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
}