make a div screen size dependent - html

Question

I'm working on an app with Ionic framework and I'm still a novice in css. I created a images slider with timer and but the size of it is fixed. However, I would like to change it to be depends on the screen size and resolution.
This is the 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">
<img src="../img/pizza_sale.png"/>
<div class="tooltip"><h1>text 2</h1></div>
</li>
<li id="third" class="thirdanimation">
<img src="../img/sandwich_sale.jpg"/>
<div class="tooltip"><h1>text 3</h1></div>
</li>
</ul>
</div>
</div>
</div>
</div>
</ion-content>
In the
style.css
I did something like 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 now it shows the images perfectly but it it doesn't of course fit to any screen.
EDIT 1
I'm adding the style for the 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: all 0.3 ease-in-out;
}

Answer 1

I've added one media query for the height. Here's a link for mediaquery if you want to change something.
As for slider i've fixed the issue now between third and first slide there is a blank slide. I was not sure if it is by design or not. Hope you can fix it 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: 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

Change
#slider img{
max-width:100%;
display:block;
width:100%;
}
Remove absolute values of your image.