div 화면 크기에 따라 달라집니다.

Question

저는 이오닉 프레임 워크가있는 응용 프로그램에서 작업하고 있으며 CSS에서는 아직 초보자입니다. 타이머가있는 이미지 슬라이더를 만들었지 만 크기는 고정되어 있습니다. 그러나 화면 크기와 해상도에 따라 변경하고 싶습니다.

있는 style.css

내가 그런 일 한에서

<ion-content> 
    <div class="container"> 
     <div id="content-slider"> 
      <div id="slider"> 
       <div id="mask"> 
        <ul> 
         <li id="first" class="firstanimation"> 
          <a href=#><img src="../img/coffe_and_sweet_sale.jpg"/></a> 
          <div class="tooltip"><h1>text 1</h1></div> 
         </li> 
         <li id="second" class="secondanimation"> 
          <a href="#"><img src="../img/pizza_sale.png"/></a> 
          <div class="tooltip"><h1>text 2</h1></div> 
         </li> 
         <li id="third" class="thirdanimation"> 
          <a href="#"><img src="../img/sandwich_sale.jpg"/></a> 
          <div class="tooltip"><h1>text 3</h1></div> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
    </ion-content> 

:

이

은 HTML 콘텐츠입니다 그래서 지금

#slider{ 
    background: #000; 
    border: 5px solid #eaeaea; 
    box-shadow: 1px 1px 5px rgba(0,0,0,0.7); 
    height: 320px; 
    width: 680px; 
    margin: 40px auto 0; 
    overflow: visible; 
    position: relative; 
} 

#mask{ 
    overflow: hidden; 
    height: 310px; 
} 

#slider ul{ 
    margin: 0; 
    padding: 0; 
    position: relative; 
} 

#slider li{ 
    width: 680px; 
    height: 320px; 
    position: absolute; 
    top: -325px; 
    list-style: none; 
} 

#slider img{ 
    width: 680px; 
    height: 320px; 
} 

그것을 메신저 보여줍니다. 그러나 그것은 어떤 스크린에도 맞지 않습니다.

내가 슬라이더 애니메이션의 스타일을 추가 해요 1

편집 :

#slider li.firstanimation{ 
    animation: cycle 24s linear infinite; 
} 

#slider li.secondanimation{ 
    animation: cycletwo 24s linear infinite; 
} 
#slider li.thirdanimation{ 
    animation: cyclethree 24s linear infinite; 
} 

@keyframes cycle{ 
    0% {top: 0px;} 
    3.33% {top: 0px;} 
    26.64% {top:0px; opacity: 1; z-index: 0;} 
    29.97% {top: 325px; opacity: 0; z-index: 0;} 
    30.97% {top:-325px; opacity: 0; z-index: 0;} 
    93.34% {top:-325px; opacity: 0; z-index: 0;} 
    96.67% {top: -325px; opacity: 0; } 
    100% {top: 0px; opacity: 1;} 
} 

@keyframes cycletwo{ 
    0% {top: -325px; opacity: 0;} 
    26.64% {top: -325px; opacity: 0} 
    29.97% {top:0px; opacity: 1;} 
    33.3% {top: 0px; opacity: 1;} 
    59.94% {top: 0px; opacity: 1; z-index: 0;} 
    63.27% {top: 325px; opacity: 0; z-index: 0;} 
    64.27% {top: -325px; opacity: 0; z-index: -1; } 
    100% {top: -325px; opacity: 0; z-index: -1;} 
} 

@keyframes cyclethree{ 
    0% {top: -325px; opacity: 0;} 
    59.94% {top: -325px; opacity: 0;} 
    63.27% {top:0px; opacity: 1;} 
    66.6% {top: 0px; opacity: 1;} 
    93.24% {top: 0px; opacity: 1;} 
    96.57% {top: 325px; opacity: 0; z-index: 0;} 
    97.57% {top: -325px; opacity: 0; z-index: -1;} 
    100% {top: -325px; opacity: 0; z-index: -1;} 
} 

#slider .tooltip{ 
    background: rgba(0,0,0,0.7); 
    width: 450px; 
    height; 60px; 
    position: relative; 
    bottom: 85px; 
} 

#slider .tooltip h1{ 
    color: #fff; 
    font-size: 24px; 
    font-weight: 300; 
    line-height: 60px; 
    padding: 0 0 0 10px; 
} 

#slider .tooltip { 
    transition: all 0.3 ease-in-out; 
} 

Answer 1

높이에 대한 미디어 쿼리를 하나 추가했습니다. Here's 뭔가를 변경하려면 mediaquery 링크를 클릭하십시오.

슬라이드의 경우 세 번째 슬라이드와 첫 번째 슬라이드 사이에 문제가 해결되었습니다. 빈 슬라이드가 있습니다. 그것이 디자인에 의한 것인지 아닌지 확실하지 않았습니다. 필요하면 고칠 수 있기를 바랍니다.

#slider{ 
    background: #000; 
    border: 5px solid #eaeaea; 
    box-shadow: 1px 1px 5px rgba(0,0,0,0.7); 
    height: 320px; 
    width: 80%; 
    max-width: 680px; 
    margin: 40px auto 0; 
    overflow: visible; 
    position: relative; 
    } 

    #mask{ 
    overflow: hidden; 
    height: 310px; 
    } 

    #slider ul{ 
    margin: 0; 
    padding: 0; 
    height: 320px; 
    width: inherit; 
    position: relative; 
    } 

    #slider a{ 
    width: 100%; 
    height: 100%; 
    } 

    #slider li{ 
    width: inherit; 
    height: 320px; 
    position: absolute; 
    top: 100px; 
    list-style: none; 
    } 

    #slider img{ 
    width: 100%; 
    height: 320px; 
    } 
    #slider li.firstanimation{ 
    animation: cycle 24s linear infinite; 
    } 

    #slider li.secondanimation{ 
    animation: cycletwo 24s linear infinite; 
    } 
    #slider li.thirdanimation{ 
    animation: cyclethree 24s linear infinite; 
    } 

    @keyframes cycle{ 
    0% {top: 0px;} 
    3.33% {top: 0px;} 
    26.64% {top:0px; opacity: 1; z-index: 0;} 
    29.97% {top: 325px; opacity: 0; z-index: 0;} 
    30.97% {top:-325px; opacity: 0; z-index: 0;} 
    93.34% {top:-325px; opacity: 0; z-index: 0;} 
    96.67% {top: -325px; opacity: 0; } 
    100% {top: 0px; opacity: 1;} 
    } 

    @keyframes cycletwo{ 
    0% {top: -325px; opacity: 0;} 
    26.64% {top: -325px; opacity: 0} 
    29.97% {top:0px; opacity: 1;} 
    33.3% {top: 0px; opacity: 1;} 
    59.94% {top: 0px; opacity: 1; z-index: 0;} 
    63.27% {top: 325px; opacity: 0; z-index: 0;} 
    64.27% {top: -325px; opacity: 0; z-index: -1; } 
    100% {top: -325px; opacity: 0; z-index: -1;} 
    } 

    @keyframes cyclethree{ 
    0% {top: -325px; opacity: 0;} 
    59.94% {top: -325px; opacity: 0;} 
    63.27% {top:0px; opacity: 1;} 
    66.6% {top: 0px; opacity: 1;} 
    93.24% {top: 0px; opacity: 1;} 
    96.57% {top: 325px; opacity: 0; z-index: 0;} 
    97.57% {top: -325px; opacity: 0; z-index: -1;} 
    100% {top: -325px; opacity: 0; z-index: -1;} 
    } 

    #slider .tooltip{ 
    background: rgba(0,0,0,0.7); 
    width: 60%; 
    height; 60px; 
    position: relative; 
    bottom: 85px; 
    } 

    #slider .tooltip h1{ 
    color: #fff; 
    font-size: 24px; 
    font-weight: 300; 
    line-height: 60px; 
    padding: 0 0 0 10px; 
    } 

    #slider .tooltip { 
    transition: all 0.3 ease-in-out; 
    } 

    @media screen and (max-height: 380px){ 
    #slider{ 
     height: 200px; 
    } 

    #mask{ 
     height:190px; 
    } 

    #slider img{ 
     height:190px; 
    } 

    #slider li{ 
     height:190px; 
    } 

    #slider ul{ 
     height:190px; 
    } 

    #slider .tooltip{ 
     bottom: 80px; 
    }   
    } 

Answer 2

변경

#slider img{ 
    max-width:100%; 
    display:block; 
    width:100%; 
} 

은 이미지의 절대 값을 제거합니다.