높이가 100 %로 설정된 경우 슬라이더가 사라집니다.

html과 css를 사용하여 슬라이더를 만들고 있습니다. 괜찮 으면 좋겠지 만 높이를 100 %로 설정하면 사라집니다. 백분율 대신 픽셀을 사용하면 정상적으로 작동하지만 100 % 또는 백분율로 표시된 값을 사용하면 표시되지 않습니다. 그것은 모든높이가 100 %로 설정된 경우 슬라이더가 사라집니다.

body { 
 
    height: 100%; 
 
} 
 

 
.slides { 
 
    height: 100%; 
 
    width:100%; 
 
    padding: 5px; 
 
} 
 

 
.imgcont { 
 
    width: 50%; 
 
    height:100%; 
 
    animation: showpromo 20s linear infinite; 
 
} 
 

 
@keyframes showpromo { 
 
    0%{background-image: url(1.JPG); background-size: 100% 100%;} 
 
    15%{background-image: url(2.JPG); background-size: 100% 100%;} 
 
    20%{background-image: url(3.JPG); background-size: 100% 100%;} 
 
    35%{background-image: url(4.JPG);background-size: 100% 100%;} 
 
    40%{background-image: url(5.JPG); background-size: 100% 100%;} 
 
    55%{background-image: url(1.JPG); background-size: 100% 100%;} 
 
    60%{background-image: url(2.JPG);background-size: 100% 100%;} 
 
    75%{background-image: url(3.JPG);background-size: 100% 100%;} 
 
    80%{background-image: url(4.JPG);background-size: 100% 100%;} 
 
    100%{background-image: url(5.JPG);background-size: 100% 100%;}  
 
}

<!DOCTYPE html> 
 
<html lang=""> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title></title> 
 
    <link rel="stylesheet" href="slider.css" type="text/css"> 
 
</head> 
 

 
<body> 
 
    <div class = "slides"> 
 
     <div class="imgcont"> 
 
     </div> 
 
    </div> 
 
</body>

.imgcont에

출처

2017-11-06 Zaid

일어나고

이 당신을 위해 작동합니다. 대신 100%폭의

는 .slides에 나는 100vw을 사용하고 높이100vw

당신은 vw 문서 here를 찾을 수 있습니다. 의심의 여지가 나 한테 물어 마십시오가있는 경우

body { 
 
    height: 100%; 
 
    width: 100%; 
 
    padding:0px; 
 
    margin:0px; 
 
} 
 

 
.slides { 
 
    height: 100vh; 
 
    width: 100vw; 
 
    padding: 5px; 
 
} 
 

 
.imgcont { 
 
    width: 100%; 
 
    height: 100%; 
 
    animation: showpromo 20s linear infinite; 
 
} 
 

 
@keyframes showpromo { 
 
    0% { 
 
    background-image: url(http://www.menucool.com/slider/prod/image-slider-2.jpg); 
 
    background-size: 100% 100%; 
 
    } 
 
    15% { 
 
    background-image: url(https://hdwallpaperz.net/wp-content/uploads/2017/01/Images-9.jpg); 
 
    background-size: 100% 100%; 
 
    } 
 
    20% { 
 
    background-image: url(https://www.w3schools.com/css/trolltunga.jpg); 
 
    background-size: 100% 100%; 
 
    } 
 
    35% { 
 
    background-image: url(https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg); 
 
    background-size: 100% 100%; 
 
    } 
 
    40% { 
 
    background-image: url(http://static3.businessinsider.com/image/58dbde7c77bb7050008b4ae9-1190-625/nasas-1-billion-jupiter-probe-just-sent-back-breathtaking-new-images-of-the-gas-giant.jpg); 
 
    background-size: 100% 100%; 
 
    } 
 
    55% { 
 
    background-image: url(http://www.menucool.com/slider/prod/image-slider-2.jpg); 
 
    background-size: 100% 100%; 
 
    } 
 
    60% { 
 
    background-image: url(https://hdwallpaperz.net/wp-content/uploads/2017/01/Images-9.jpg); 
 
    background-size: 100% 100%; 
 
    } 
 
    75% { 
 
    background-image: url(https://www.w3schools.com/css/trolltunga.jpg); 
 
    background-size: 100% 100%; 
 
    } 
 
    80% { 
 
    background-image: url(https://static.pexels.com/photos/248797/pexels-photo-248797.jpeg); 
 
    background-size: 100% 100%; 
 
    } 
 
    100% { 
 
    background-image: url(http://static3.businessinsider.com/image/58dbde7c77bb7050008b4ae9-1190-625/nasas-1-billion-jupiter-probe-just-sent-back-breathtaking-new-images-of-the-gas-giant.jpg); 
 
    background-size: 100% 100%; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html lang=""> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title></title> 
 
    <link rel="stylesheet" href="slider.css" type="text/css"> 
 
</head> 
 

 
<body> 
 
    <div class="slides"> 
 
    <div class="imgcont"> 
 
    </div> 
 
    </div> 
 
</body>

희망이 당신을 위해 도움이되었다.

출처

2017-11-06 05:45:06 weBBer

vw를 사용하면 반응이 느껴 집니까? – Zaid

네, 항상 화면 너비의 100 %입니다'vw' ='뷰포트 너비' – weBBer

높이가 100 %로 설정된 경우 슬라이더가 사라집니다.

답변

관련 문제