슬라이더에서 이미지 크기 조정

Question

슬라이더에 문제가 있습니다. 현재 내 홈페이지에 잘 작동합니다. 그러나 모바일 버전 (최대 : 480px)으로 크기를 조정하면 이미지 크기가 1920x에서 480x로 변경되는 동안 사라집니다. 슬라이더 자체 (단추와 테두리)는 그대로 유지됩니다. 기본적으로 이미지 자체 만 있습니다. 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>. 귀하 께서 CSS 속성 background-size을 사용할 수 있습니다 background-image 스타일로 된 div로 전환하여

확실히 이미지는 단지의 일부를 볼 것이다 (필자는 background-size 속성으로 cover을 선택하는 대신 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> 

UPDATED JS 뿐인

JS Fiddle

가