Изменение размера изображения в слайдере

Question

У меня проблема с моим слайдером. В настоящее время на моей домашней странице он отлично работает. Но когда я изменяю его до мобильной версии (max: 480px), изображение исчезает при изменении размера с 1920 пикселей на 480 пикселей. Сам слайдер (кнопки и рамка) остается неизменным, это в основном только изображение. 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; 
} 

Вот код для обычного экрана рабочего стола.

Это мой HTML-код:

<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

Так что главный вопрос вы столкнулись в том, что с помощью <img> тегов ваших изображений были масштабирование пропорционально и исчезающие вверх из поля зрения. Причина, по которой вы не могли видеть это, была из-за margin-top:-150px, которая находилась на самом удаленном контейнере <div>.

При переключении на дивы с background-image стилей вы можете использовать свойство CSS background-size, чтобы убедиться, что изображение остается видимым (я выбрал cover как атрибут background-size, но не стесняйтесь использовать contain вместо этого, вы увидите только некоторые из цвет фона фона при этом). Я добавил комментарии к HTML и CSS, где необходимо отметить важные изменения и показать вам, что я удалил.

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> 

ОБНОВЛЕНО JS FIDDLE

JS Fiddle