如何使图像适合简单的自动播放幻灯片? [英] How to make an image fit into a simple auto-playing slideshow?

问题描述

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

My question is regarding sizing of images into a section, which I think is called a container. Does anybody happen to know how to do this. I've included the code of the aspects involved.

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>

推荐答案

首先，我爱你的精力旺盛的人，太神奇了.:)

First of all, I love your energy man, amazing. :)

您只想要几行结果.

错误之一是您实际上没有将 css 中的 slideshow div定位为目标，而是将其定位为 .slideshow ，并且这是错误的，因为幻灯片是ID，因此您应该在 中说 #slideshow .

One of the errors was that you didnt actually target the slideshow div in your css, you were targeting it as .slideshow, and that is wrong because slideshow is an ID, so you should say #slideshow in your css.

最后要做的是使图像始终完全适合您的容器，您可以使用 width:100％;来完成.高度:100％;对象适合:封面；

And the last thing that you gotta do is make your images always fully fit your container, you can do this by using width : 100%; height: 100%; object-fit: cover;

只需用此代码替换当前的 css ，它就可以工作了:)

Just replace your current css with this one, and it should work :)

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

这篇关于如何使图像适合简单的自动播放幻灯片?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！