make all images the same size in a slideshow - html

Question

im trying to make all the images in a slideshow be of same size, I've tried using
.slideshow-container img {
height: 100%;
width: 100%;
}
but doesn't work

Answer 1

I would first start out with adding this to your css
body,html{
height: 100%;
}
Then I would create a parent element to basically contain all of the images
<div class='container'> <!-- your images --> </div>
Then just set the width of that to say 500px by 500px
Finally, you should be able to use height & width at 100%
$(document).ready(function(){
$('.2').click(function(){
$('.img1').css("display","none");
$('.img2').css("display","block");
});
$('.3').click(function(){
$('.img2').css("display","none");
$('.img3').css("display","block");
});
});
// not a very good example of how to make a slideshow but its more to show how to make images the same size as opposed to having a working slideshow
body,html{
margin: 0;
height: 100%;
}
.container{
width: 80%;
height: 50%;
background-color: black;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 5%;
}
.img1{
background-image: url('https://images.pexels.com/photos/284951/pexels-photo-284951.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}
.img2{
background-image: url('https://images.pexels.com/photos/397998/pexels-photo-397998.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
display: none;
}
.img3{
background-image: url('https://images.pexels.com/photos/376533/pexels-photo-376533.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>
</div>
<button class="1">Img 1</button>
<button class="2">Img 2</button>
<button class="3">Img 3</button>
<!--
Photo by Timotej Nagy from Pexels https://www.pexels.com/photo/dark-gold-lamp-light-284951/
-->

Answer 2

If you want a full screen slider, it's going to be something more complicated than that. Try this:
.slideshow-container {
position:absolute;
height:100%;
width:100%;
}
.slideshow-container img {
max-width:100%;
width:100%;
position:fixed;
left:0;
}
I would also recommend to check examples. From here maybe:
Link