Image resizing in slider - html

Question

I have a problem with my slider.
Currently on my homepage it works fine. But when i resize it to a mobile version (max: 480px), the image dissapears while resizing from 1920px to 480px. The slider itself (the buttons and border) stay the same, it's basically only the image itself. Jsfiddle: https://jsfiddle.net/s8jotqj3/2/
/* slider test*/
#Slider {
width: 100%;
max-width: 1940px;
height: 470px;
margin-top:-150px;
position: relative;
background: rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.bgslide {
background-color: black;
position: relative;
margin-top:440px;
height:30px;
z-index:5;
bottom:0;
opacity: 0.5;
}
#s1, #s2, #s3, #s4 {
padding: 6px;
background: white;
position: absolute;
left: 50%;
bottom: 10px;
opacity: 0.3;
cursor: pointer;
z-index: 999;
}
#s1 {
margin-left: -36px;
border-radius: 20px;
}
#s2 {
margin-left: -12px;
border-radius: 20px;
}
#s3 {
margin-left: 12px;
border-radius: 20px;
}
#s4 {
margin-left: 36px;
border-radius: 20px;
}
#s1:hover,
#s2:hover,
#s3:hover,
#s4:hover {
opacity: .50;
}
.SliderBinnen {
width: 100%;
max-width: 1930px;
height: 470px;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.control {
display: none;
}
#Slide1:checked ~ .SliderCenter {
margin-left: 0%;
}
#Slide2:checked ~ .SliderCenter {
margin-left: -100%;
}
#Slide3:checked ~ .SliderCenter {
margin-left: -200%;
}
#Slide4:checked ~ .SliderCenter {
margin-left: -300%;
}
#Slide1:checked + #s1 {
opacity: 1;
}
#Slide2:checked + #s2 {
opacity: 1;
}
#Slide3:checked + #s3 {
opacity: 1;
}
#Slide4:checked + #s4 {
opacity: 1;
}
.SliderCenter {
width: 400%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow-y: hidden;
z-index: 1;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.slide img {
width: 25%;
float:left;
}
That's the code for the normal desktop screen.
This is my HTML code:
<div id="SliderVanbuiten">
<div class="SliderBinnen">
<input checked type="radio" name="slide" class="control" id="Slide1" />
<label for="Slide1" id="s1"></label>
<input type="radio" name="slide" class="control" id="Slide2" />
<label for="Slide2" id="s2"></label>
<input type="radio" name="slide" class="control" id="Slide3" />
<label for="Slide3" id="s3"></label>
<input type="radio" name="slide" class="control" id="Slide4" />
<label for="Slide4" id="s4"></label>
<div class="bgslide"></div>
<div class="SliderCenter">
<a class="slide inactive" href=""><img class="testshow" src="images/slide3.jpg" /></a>
<a class="slide inactive" href=""><img class="test" src="images/slide4.jpg" /></a>
<a class="slide inactive" href=""><img class="test" src="images/slide2.jpg" /></a>
<a class="slide inactive" href=""><img class="test" src="images/slide1.jpg" /></a>
</div>
</div>
</div>

Answer 1

So the main issue you were facing is that by using <img> tags your images were scaling proportionately and disappearing upwards out of view. The reason you couldnt see this was because of the margin-top:-150px that was on the outermost container <div>.
By switching to divs with background-image styles you can use the css property background-size to make sure the image stays visible (I have selected cover as the background-size attribute, but feel free to use contain instead, you will just see some of the background grey color in doing so). I have added comments to the HTML and CSS where necessary to mark important changes, and show you what i removed.
CSS
/* slider test*/
#SliderVanbuiten {
width: 100%;
max-width: 1940px;
// height: 470px;
// margin-top:-150px; // why is this here?
position: relative;
background: rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.bgslide {
background-color: black;
position: relative;
margin-top:440px;
height:30px;
z-index:5;
bottom:0;
opacity: 0.5;
}
#s1, #s2, #s3, #s4 {
padding: 6px;
background: white;
position: absolute;
left: 50%;
bottom: 10px;
opacity: 0.3;
cursor: pointer;
z-index: 999;
}
#s1 {
margin-left: -36px;
border-radius: 20px;
}
#s2 {
margin-left: -12px;
border-radius: 20px;
}
#s3 {
margin-left: 12px;
border-radius: 20px;
}
#s4 {
margin-left: 36px;
border-radius: 20px;
}
#s1:hover,
#s2:hover,
#s3:hover,
#s4:hover {
opacity: .50;
}
.SliderBinnen {
width: 100%;
max-width: 1930px;
position:relative;
//height: 470px;
//position: absolute;
//top: 0;
//left: 0;
overflow: hidden;
}
.control {
display: none;
}
#Slide1:checked ~ .SliderCenter {
margin-left: 0%;
}
#Slide2:checked ~ .SliderCenter {
margin-left: -100%;
}
#Slide3:checked ~ .SliderCenter {
margin-left: -200%;
}
#Slide4:checked ~ .SliderCenter {
margin-left: -300%;
}
#Slide1:checked + #s1 {
opacity: 1;
}
#Slide2:checked + #s2 {
opacity: 1;
}
#Slide3:checked + #s3 {
opacity: 1;
}
#Slide4:checked + #s4 {
opacity: 1;
}
.SliderCenter {
width: 400%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow-y: hidden;
z-index: 1;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
font-size:0; // fixes inline-block spacing
}
.slide {
position:relative;
width:25%;
padding-bottom:440px; // must match bgslide margin-top
height:0;
display:inline-block;
}
.slide > div {
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
background-size:cover;
background-position:center center;
}
HTML
<body>
<main class="home">
<div class="wallpaper1">
<div id="SliderVanbuiten">
<div class="SliderBinnen">
<input checked type="radio" name="slide" class="control" id="Slide1" />
<label for="Slide1" id="s1"></label>
<input type="radio" name="slide" class="control" id="Slide2" />
<label for="Slide2" id="s2"></label>
<input type="radio" name="slide" class="control" id="Slide3" />
<label for="Slide3" id="s3"></label>
<input type="radio" name="slide" class="control" id="Slide4" />
<label for="Slide4" id="s4"></label>
<div class="bgslide"></div>
<div class="SliderCenter">
<a class="slide inactive" href="">
<div class="test show" style="background-image:url('http://www.spyderonlines.com/images/wallpapers/picture/picture-10.jpg')"></div>
</a>
<a class="slide inactive" href="">
<div class="test show" style="background-image:url('http://i.telegraph.co.uk/multimedia/archive/03235/potd-husky_3235255k.jpg')"></div>
</a>
<a class="slide inactive" href="">
<div class="test" style="background-image:url('http://www.spyderonlines.com/images/wallpapers/picture/picture-10.jpg')"></div>
</a>
<a class="slide inactive" href="">
<div class="test show" style="background-image:url('http://i.telegraph.co.uk/multimedia/archive/03235/potd-husky_3235255k.jpg')"></div>
</a>
</div>
</div>
</div>
</div> <!-- missing a closing </div> -->
</main>
</body>
UPDATED JS FIDDLE
JS Fiddle