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

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

回答1:

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

You are only couple of lines from the result you want.

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.

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;

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

来源：https://stackoverflow.com/questions/65380644/how-to-make-an-image-fit-into-a-simple-auto-playing-slideshow

标签

javascript

html

css

image