Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Div con proporción 16:9

Estas en el tema de Div con proporción 16:9 en el foro de CSS en Foros del Web. Buenas, estoy intentando montar un pequeño proyecto pero me he dado de bruces casi en el primer paso. Necesito un div que siempre se muestre ...
  #1 (permalink)  
Antiguo 24/11/2014, 09:27
Avatar de AxxeL  
Fecha de Ingreso: noviembre-2014
Ubicación: Sevilla
Mensajes: 3
Antigüedad: 9 años, 3 meses
Puntos: 0
Pregunta Div con proporción 16:9

Buenas, estoy intentando montar un pequeño proyecto pero me he dado de bruces casi en el primer paso. Necesito un div que siempre se muestre en proporción 16:9 y se ajuste a alto o ancho cuando se reduzca la pantalla, pero que siempre quede proporcional, ajustado y sin scroll (Toda la web se muestra sobre este div). Se puede hacer solo con css o necesitaré también de javascript para que vaya calculando el ancho de la ventana y vaya cambiando las proporciones del div?

Espero haberme explicado bien.

Última edición por AxxeL; 24/11/2014 a las 09:41
  #2 (permalink)  
Antiguo 24/11/2014, 15:08
Avatar de AxxeL  
Fecha de Ingreso: noviembre-2014
Ubicación: Sevilla
Mensajes: 3
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Div con proporción 16:9

He estado dándole vueltas y he conseguido algo parecido, pero por mas vueltas que le doy no consigo lo que necesito. He hecho un esquema para que veais lo que necesito a ver si me dais mas ideas, por que estoy un poco desesperado ya.

  #3 (permalink)  
Antiguo 25/11/2014, 08:34
Avatar de AxxeL  
Fecha de Ingreso: noviembre-2014
Ubicación: Sevilla
Mensajes: 3
Antigüedad: 9 años, 3 meses
Puntos: 0
Sonrisa Respuesta: Div con proporción 16:9

Viendo que nadie ha podido ayudarme pongo la solución que he terminado encontrando:

He creado un div que lo engloba todo y le he puesto lo siguiente:
Código:
#marco {
  width: 100vw;
  height: 56.25vw;
  /* 100/56.25 = 1.778 */
  max-height: 100vh;
  max-width: 177.78vh;
  /* 16/9 = 1.778 */
  margin: auto;
  position: absolute;
  /* Centrado vertical */
  top: 0;
  bottom: 0;
  /* Centrado horizontal */
  left: 0;
  right: 0;
}
Con eso obtienes un cuadro que siempre se mantiene en 16:9 y ajustado a la pantalla

Espero que le sirva a otros

Etiquetas: javascript
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




La zona horaria es GMT -6. Ahora son las 00:45.