Why do my images not overflow when using relative values in Firefox? - html

Question

I want to create an image slideshow, which only shows one image at a time. However, I want to use relative values for every child of the parent container, so that I can easily resize the slideshow. Every image should have the same height and width.
As I already mentioned, I only want to show one image at a time. As a result, the others images need to be hidden with overflow: hidden;. The problem is that my images do not even overflow in Firefox.
.image-slider {
height: 20rem;
width: 20rem;
}
.image-slider .main {
display: flex;
align-items: center;
}
.main .images {
display: flex;
overflow: auto;
width: 90%;
height: 100%;
}
.main .images img {
object-fit: scale-down;
width: 100%;
height: 100%;
}
<div class="image-slider">
<div class="main">
<div class="images">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Red.svg/512px-Red.svg.png" />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/768px-Solid_blue.svg.png" />
</div>
</div>
</div>
I want that only the red image is displayed, and that the blue one should vanish because it should overflow. I'm pretty sure that the issue is because of my relative values, however I can't explain why. In Chrome, I achieve my desired result with the above code.
How can I create a slideshow, which is easily resizable, sets all images to the same size (regardless of the source width and height), shows only one image at a time and hides the other ones?

Answer 1

If want use this slideshow and size inheritance parent ( in the code below image1 small and image2 large ,but all images same size in display)
(Use snippet in full screen!)
const image1 = document.querySelector("#image1")
const image2 = document.querySelector("#image2")
const circle1 = document.querySelector(".circle.one")
const circle2 = document.querySelector(".circle.two")
console.log(image1)
circle1.addEventListener("click", () => {
image1.classList.add("active")
image2.classList.remove("active")
})
circle2.addEventListener("click", () => {
image1.classList.remove("active")
image2.classList.toggle("active")
})
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
}
.image-slider {
position: relative;
height: 20rem;
width: 20rem;
}
.image-slider .main {
width: 100%;
}
.images {
display: none;
}
.images.active {
margin: 0 auto;
display: flex;
overflow: auto;
width: 90%;
height: 100%;
}
.main .images img {
object-fit: scale-down;
width: 100%;
height: 100%;
}
.circles {
position: absolute;
width: 20rem;
display: flex;
justify-content: center;
align-items: center;
}
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid black;
text-align: center;
color: white;
background-color: black;
margin: 1rem 1rem;
cursor: pointer;
}
.circle:hover {
color: rgb(0, 0, 0);
background-color: rgb(255, 255, 255);
}
<div class="image-slider">
<div class="main">
<div id="image1" class="images active">
<img src="https://free-images.com/sm/d839/earth_clouds_jpeg.jpg" />
</div>
<div id="image2" class="images">
<img
src="https://free-images.com/lg/52d5/earth_planet_space_planet.jpg"
/>
</div>
</div>
<div class="circles">
<div class="circle one">1</div>
<div class="circle two">2</div>
</div>
</div>

Answer 2

I used width: 300%; for .main then width: 100% for .images, so that three images placed together by display:flex. Also I set overflow: hidden for .image-slider, In order to it shows only one image in a time.
Also, I used setTimeout function, in order to be slide images.
const animate1 = document.querySelector("img:nth-child(2)");
setTimeout(function() {
animate1.classList.add("animate1");
}, 1000);
const animate2 = document.querySelector("img:nth-child(3)");
setTimeout(function() {
animate2.classList.add("animate2");
}, 2000);
.image-slider {
height: 20rem;
width: 20rem;
overflow: hidden;
}
.image-slider .main {
display: flex;
align-items: center;
width: 300%;
height: 100%;
}
.main .images {
display: flex;
width: 100%;
height: 100%;
}
.main .images img {
width: 100%;
height: 100%;
}
img:nth-child(2){
transition: 1s transform;
}
.animate1 {
transform: translateX(-20rem);
}
img:nth-child(3){
transition: 1s transform;
}
.animate2{
transform: translateX(-40rem);
}
<div class="image-slider">
<div class="main">
<div class="images">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Red.svg/512px-Red.svg.png" />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/768px-Solid_blue.svg.png" />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Red.svg/512px-Red.svg.png" />
</div>
</div>
</div>

Answer 3

Adding flex-shrink: 0; to the image elements solves the problem.