Hola tengo una web que importa las imágenes de una base de datos con resolución 1024x768 px, mi web se ajusta a las pantallas 100%, tanto de alto como de ancho y no hay scroll.
Hasta ahí, todo funciona correctamente, pero cuando abro una imágen en una pantalla más pequeña que 1024x768 px de resolución, el slider se come un trozo(según la pantalla) las imágenes por abajo, osea que no se ajustan 100% la altura y la anchura.
Y aquí mi pregunta: ¿habría alguna forma de que el slider no se comiera las imágenes por abajo o que dicha imágen se ajustara a la resolución de la pantalla en altura?
Uso wow-slider y mi codigo CSS es el siguiente:
Código CSS:
Ver original#wowslider-container1 {
zoom: 1;
position: relative;
max-width:100%;
margin:0px auto 0px;
z-index:90;
border:none;
text-align:left; /* reset align=center */
}
* html #wowslider-container1{ width:100% }
#wowslider-container1 .ws_images ul{
position:relative;
width: 10000%;
height:auto;
left:0;
list-style:none;
margin:0;
padding:0;
border-spacing:0;
overflow: visible;
/*table-layout:fixed;*/
}
#wowslider-container1 .ws_images ul li{
width:1%;
line-height:0; /*opera*/
float:left;
font-size:0;
padding:0 0 0 0 !important;
margin:0 0 0 0 !important;
}
#wowslider-container1 .ws_images{
position: relative;
left:0;
top:0;
width:100%;
height:100%;
overflow:hidden;
}
#wowslider-container1 .ws_images a{
width:100%;
display:block;
color:transparent;
}
#wowslider-container1 img{
max-width: none !important;
height:100%;
}
#wowslider-container1 .ws_images img{
width:100%;
border:none 0;
height:100%;
max-width: none;
padding:0;
}
#wowslider-container1 a{
text-decoration: none;
outline: none;
border: none;
}
#wowslider-container1 .ws_bullets {
font-size: 0px;
float: left;
position:absolute;
z-index:70;
}
#wowslider-container1 .ws_bullets div{
position:relative;
float:left;
}
#wowslider-container1 a.wsl{
display:none;
}
#wowslider-container1 sound,
#wowslider-container1 object{
position:absolute;
}
#wowslider-container1 .ws_bullets {
padding: 9px;
}
#wowslider-container1 .ws_bullets a {
width:11px;
height:11px;
background: url(./bullet.png) left top;
float: left;
text-indent: -4000px;
position:relative;
margin-left:5px;
color:transparent;
}
#wowslider-container1 .ws_bullets a:hover{
background-position: 0 50%;
}
#wowslider-container1 .ws_bullets a.ws_selbull{
background-position: 0 100%;
}
#wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev {
position:absolute;
display:block;
top:50%;
margin-top:-20px;
z-index:60;
height: 45px;
width: 45px;
background-image: url(./arrows.png);
opacity: 0.8;
}
#wowslider-container1 a.ws_next{
background-position: 100% 0;
right:21px;
}
#wowslider-container1 a.ws_prev {
left:21px;
background-position: 0 0;
}
#wowslider-container1 a.ws_next:hover{
opacity: 1;
}
#wowslider-container1 a.ws_prev:hover {
opacity: 1;
}
/* bottom center */
#wowslider-container1 .ws_bullets {
bottom: 0px;
left:50%;
}
#wowslider-container1 .ws_bullets div{
left:-50%;
}
#wowslider-container1 .ws-title{
position:absolute;
display:block;
bottom: 17px;
left: 0px;
margin: 9px;
margin-left: 0px;
margin-right: 9px;
padding:8px;
background:#FFFFFF;
color:#5D5D5D;
z-index: 50;
font-family:'Open Sans',Arial,Helvetica,sans-serif;
font-size: 18px;
border-radius:5px;
-moz-border-radius:0 10px 10px 0;
border-radius:0 10px 10px 0;
opacity:0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
-moz-box-shadow: 0 0 2px #5D5D5D;
box-shadow: 0 0 2px #5D5D5D;
}
#wowslider-container1 .ws-title div{
padding-top:5px;
font-size: 14px;
}
#wowslider-container1 .ws_images ul{
animation: wsBasic 24s infinite;
-moz-animation: wsBasic 24s infinite;
-webkit-animation: wsBasic 24s infinite;
}
@keyframes wsBasic{0%{left:-0%} 8.33%{left:-0%} 16.67%{left:-100%} 25%{left:-100%} 33.33%{left:-200%} 41.67%{left:-200%} 50%{left:-300%} 58.33%{left:-300%} 66.67%{left:-400%} 75%{left:-400%} 83.33%{left:-500%} 91.67%{left:-500%} }
@-moz-keyframes wsBasic{0%{left:-0%} 8.33%{left:-0%} 16.67%{left:-100%} 25%{left:-100%} 33.33%{left:-200%} 41.67%{left:-200%} 50%{left:-300%} 58.33%{left:-300%} 66.67%{left:-400%} 75%{left:-400%} 83.33%{left:-500%} 91.67%{left:-500%} }
@-webkit-keyframes wsBasic{0%{left:-0%} 8.33%{left:-0%} 16.67%{left:-100%} 25%{left:-100%} 33.33%{left:-200%} 41.67%{left:-200%} 50%{left:-300%} 58.33%{left:-300%} 66.67%{left:-400%} 75%{left:-400%} 83.33%{left:-500%} 91.67%{left:-500%} }
#wowslider-container1 .ws_images {
border-radius: 4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
#wowslider-container1 .ws_effect img{
border-radius: 4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
#wowslider-container1 .ws_bullets a img{
text-indent:0;
display:block;
bottom:20px;
left:-32px;
visibility:hidden;
position:absolute;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
border: 4px solid #FFF;
border-radius:5px;
-moz-border-radius:5px;
max-width:none;
}
#wowslider-container1 .ws_bullets a:hover img{
visibility:visible;
}
#wowslider-container1 .ws_bulframe div div{
height:48px;
overflow:visible;
position:relative;
}
#wowslider-container1 .ws_bulframe div {
left:0;
overflow:hidden;
position:relative;
width:64px;
background-color:#FFF;
}
#wowslider-container1 .ws_bullets .ws_bulframe{
display:none;
bottom:18px;
overflow:visible;
position:absolute;
cursor:pointer;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
border: 4px solid #FFF;
border-radius:5px;
-moz-border-radius:5px;
}
#wowslider-container1 .ws_bulframe span{
display:block;
position:absolute;
bottom:-10px;
margin-left:-6px;
left:32px;
background:url(./triangle.png);
width:15px;
height:6px;
}
Espero sus respuestas gracias!