Foros del Web » Creando para Internet » CSS »

Imágenes del slider

 Estas en el tema de Imágenes del slider en el foro de CSS en Foros del Web. 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%, ...
  #1 (permalink)  
Antiguo 01/08/2013, 06:04
 
Fecha de Ingreso: mayo-2013
Mensajes: 9
Antigüedad: 11 años, 7 meses
Puntos: 0
Imágenes del slider
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
  1. #wowslider-container1 { 
  2.     zoom: 1; 
  3.     position: relative; 
  4.     max-width:100%;
  5.     margin:0px auto 0px;
  6.     z-index:90;
  7.     border:none;
  8.     text-align:left; /* reset align=center */
  9. }
  10. * html #wowslider-container1{ width:100% }
  11. #wowslider-container1 .ws_images ul{
  12.     position:relative;
  13.     width: 10000%; 
  14.     height:auto;
  15.     left:0;
  16.     list-style:none;
  17.     margin:0;
  18.     padding:0;
  19.     border-spacing:0;
  20.     overflow: visible;
  21.     /*table-layout:fixed;*/
  22. }
  23. #wowslider-container1 .ws_images ul li{
  24.     width:1%;
  25.     line-height:0; /*opera*/
  26.     float:left;
  27.     font-size:0;
  28.     padding:0 0 0 0 !important;
  29.     margin:0 0 0 0 !important;
  30. }
  31.  
  32. #wowslider-container1 .ws_images{
  33.     position: relative;
  34.     left:0;
  35.     top:0;
  36.     width:100%;
  37.     height:100%;
  38.     overflow:hidden;
  39. }
  40. #wowslider-container1 .ws_images a{
  41.     width:100%;
  42.     display:block;
  43.     color:transparent;
  44. }
  45. #wowslider-container1 img{
  46.     max-width: none !important;
  47.     height:100%;
  48. }
  49. #wowslider-container1 .ws_images img{
  50.     width:100%;
  51.     border:none 0;
  52.     height:100%;
  53.     max-width: none;
  54.     padding:0;
  55. }
  56. #wowslider-container1 a{ 
  57.     text-decoration: none; 
  58.     outline: none; 
  59.     border: none; 
  60. }
  61.  
  62. #wowslider-container1  .ws_bullets { 
  63.     font-size: 0px; 
  64.     float: left;
  65.     position:absolute;
  66.     z-index:70;
  67. }
  68. #wowslider-container1  .ws_bullets div{
  69.     position:relative;
  70.     float:left;
  71. }
  72. #wowslider-container1  a.wsl{
  73.     display:none;
  74. }
  75. #wowslider-container1 sound, 
  76. #wowslider-container1 object{
  77.     position:absolute;
  78. }
  79. #wowslider-container1  .ws_bullets { 
  80.     padding: 9px; 
  81. }
  82. #wowslider-container1 .ws_bullets a { 
  83.     width:11px;
  84.     height:11px;
  85.     background: url(./bullet.png) left top;
  86.     float: left; 
  87.     text-indent: -4000px; 
  88.     position:relative;
  89.     margin-left:5px;
  90.     color:transparent;
  91. }
  92. #wowslider-container1 .ws_bullets a:hover{
  93.     background-position: 0 50%;
  94. }
  95. #wowslider-container1 .ws_bullets a.ws_selbull{
  96.     background-position: 0 100%;
  97. }
  98. #wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev {
  99.     position:absolute;
  100.     display:block;
  101.     top:50%;
  102.     margin-top:-20px;
  103.     z-index:60;
  104.     height: 45px;
  105.     width: 45px;
  106.     background-image: url(./arrows.png);
  107.     opacity: 0.8;   
  108. }
  109. #wowslider-container1 a.ws_next{
  110.     background-position: 100% 0;
  111.     right:21px;
  112. }
  113. #wowslider-container1 a.ws_prev {
  114.     left:21px;
  115.     background-position: 0 0; 
  116. }
  117. #wowslider-container1 a.ws_next:hover{
  118.     opacity: 1;
  119. }
  120. #wowslider-container1 a.ws_prev:hover {
  121.     opacity: 1;
  122. }  
  123. /* bottom center */
  124. #wowslider-container1  .ws_bullets {
  125.     bottom: 0px;
  126.     left:50%;
  127. }
  128. #wowslider-container1  .ws_bullets div{
  129.     left:-50%;
  130. }
  131. #wowslider-container1 .ws-title{
  132.     position:absolute;
  133.     display:block;
  134.     bottom: 17px;
  135.     left: 0px;
  136.     margin: 9px;
  137.     margin-left: 0px;
  138.     margin-right: 9px; 
  139.     padding:8px;
  140.     background:#FFFFFF;
  141.     color:#5D5D5D;
  142.     z-index: 50;
  143.     font-family:'Open Sans',Arial,Helvetica,sans-serif;
  144.     font-size: 18px;
  145.     border-radius:5px;
  146.     -moz-border-radius:0 10px 10px 0;
  147.     border-radius:0 10px 10px 0;   
  148.     opacity:0.8;
  149.     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); 
  150.     -moz-box-shadow: 0 0 2px #5D5D5D;
  151.     box-shadow: 0 0 2px #5D5D5D; 
  152. }
  153. #wowslider-container1 .ws-title div{
  154.     padding-top:5px;
  155.     font-size: 14px;
  156. }
  157. #wowslider-container1 .ws_images ul{
  158.     animation: wsBasic 24s infinite;
  159.     -moz-animation: wsBasic 24s infinite;
  160.     -webkit-animation: wsBasic 24s infinite;
  161. }
  162. @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%} }
  163. @-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%} }
  164. @-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%} }
  165.  
  166. #wowslider-container1 .ws_images {
  167.     border-radius: 4px; 
  168.     -moz-border-radius:4px;
  169.     -webkit-border-radius:4px;
  170.     
  171.  
  172. }
  173. #wowslider-container1 .ws_effect img{
  174.     border-radius: 4px;
  175.     -moz-border-radius:4px;
  176.     -webkit-border-radius:4px;
  177. }
  178. #wowslider-container1 .ws_bullets  a img{
  179.     text-indent:0;
  180.     display:block;
  181.     bottom:20px;
  182.     left:-32px;
  183.     visibility:hidden;
  184.     position:absolute;
  185.     -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  186.     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  187.     border: 4px solid #FFF;
  188.     border-radius:5px;
  189.     -moz-border-radius:5px;
  190.     max-width:none;
  191. }
  192. #wowslider-container1 .ws_bullets a:hover img{
  193.     visibility:visible;
  194. }
  195.  
  196. #wowslider-container1 .ws_bulframe div div{
  197.     height:48px;
  198.     overflow:visible;
  199.     position:relative;
  200. }
  201. #wowslider-container1 .ws_bulframe div {
  202.     left:0;
  203.     overflow:hidden;
  204.     position:relative;
  205.     width:64px;
  206.     background-color:#FFF;
  207. }
  208. #wowslider-container1  .ws_bullets .ws_bulframe{
  209.     display:none;
  210.     bottom:18px;
  211.     overflow:visible;
  212.     position:absolute;
  213.     cursor:pointer;
  214.     -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  215.     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  216.     border: 4px solid #FFF;
  217.     border-radius:5px;
  218.     -moz-border-radius:5px;
  219. }
  220. #wowslider-container1 .ws_bulframe span{
  221.     display:block;
  222.     position:absolute;
  223.     bottom:-10px;
  224.     margin-left:-6px;
  225.     left:32px;
  226.     background:url(./triangle.png);
  227.     width:15px;
  228.     height:6px;
  229. }


Espero sus respuestas gracias!
Última edición por pzin; 05/08/2013 a las 15:30 Razón: highlight
  #2 (permalink)  
Antiguo 05/08/2013, 14:36
Avatar de jlomss  
Fecha de Ingreso: diciembre-2008
Mensajes: 38
Antigüedad: 16 años
Puntos: 1
Respuesta: Imágenes del Slider
Puede ser cuando agregues la IMAGEN <img src... nomas ponle width="100%" y height="100%"

espero haber sido de ayuda, si necesitas algo mas mandame msg

Etiquetas: adaptable, imagenes, img, slider
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 20:56.