Div proporcional sin imagen

[Gorgonzola]

Tengo un div que contiene un slider que tarda unos segundos en cargar, el problema es que hasta que carga dicho slider se ven los elementos que hay más abajo antes de tiempo (elementos que deberían verse al hacer scroll hacia abajo en la página, no antes), arruinando el efecto.

Cuando carga el slider unos segundos después, el contenido se mueve hacia abajo, a su posición correcta.

En la versión desktop lo he solucionado dandole al div contenedor del slider un height fijo, pero en la versión mobile no puedo darle el height fijo, ya que el slider tiene ancho completo y el height de este dependería del dispositivo...

Dejo el código aquí:

Código HTML:

<div class="slider1-responsive">
  <?php if(function_exists("crellySlider")) crellySlider("slider1-responsive"); ?>
</div>
 

Código CSS:

.slider1-responsive {
    width:100%;
    height:auto;
}
 

[JustinKO]

¿quieres que te pille todo el alto del dispositivo? ¿no te vale con viewport height?


height: 100vh;

[Gorgonzola]

No exactamente.

El slider tiene unas medidas originales de 960x1200 y a medida que la pantalla se va haciendo más pequeña, esas medidas se reducen proporcionalmente.

Lo que quiero es que el contenedor del slider haga los mismo, pero antes de que cargue el slider mismo, porque hasta que el slider no carga, el contenedor no tiene altura ¿Me explico?

[Rafael]

No creo que se pueda solo con Css. O pones una imagen transparente para que esta modifique y empuje o tendrás que buscar una solución con JavaScript, que mida anchos y calcule altos.

[Gorgonzola]

Justo estaba pensando en lo de la imagen transparente. Creo que hare eso para no meterme en lios con Java.

Gracias y un saludo.

[Rafael]

Acá me encontré una solución muy interesante usando padding. Al parecer padding es proporcional al width. Entonces hay que poner height 0 y padding-bottom con el porcentaje que necesites.

http://stackoverflow.com/questions/1...ional-to-width

Tal vez necesites un overflow: hidden.

[Gorgonzola]

Iniciado por Rafael

Acá me encontré una solución muy interesante usando padding. Al parecer padding es proporcional al width. Entonces hay que poner height 0 y padding-bottom con el porcentaje que necesites.

[URL]http://stackoverflow.com/questions/11535827/responsive-height-proportional-to-width[/URL]

Tal vez necesites un overflow: hidden.

Perfecto amigo! Muchísimas gracias! ha funcionado a la perfección! en este caso había que usar un padding del 125%. El porcentaje se haya haciendo un sencillo calculo:

(ancho original) 960 = 100
(alto original) 1200 = X

luego:

960X = 120.000
120.000/960=125 (este resultado es el porcentaje de padding necesario)