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 inv

Solution 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: 0020pxrgba(0, 0, 0, 0.4);
}

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

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