html - make a div screen size dependent -

i'm working on app ionic framework , i'm still novice in css. created images slider timer , size of fixed. however, change depends on screen size , resolution.

this html content:

<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> 

in

style.css

i did that:

#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; } 

so shows images it doesn't of course fit screen.

edit 1

i'm adding style slider animation:

#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: 0.3 ease-in-out; } 

i've added 1 media query height. here's link mediaquery if want change something.

as slider i've fixed issue between third , first slide there blank slide. not sure if design or not. hope can fix if needed.

   #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: 0.3 ease-in-out;   }    @media screen , (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;     }           }