html - insertar - ¿Mantiene la relación de aspecto de div pero completa el ancho y alto de la pantalla en CSS?

insertar imagen html

Question

Tengo un sitio para armar que tiene una relación de aspecto fija de aproximadamente 16:9 paisaje, como un video.

Quiero que se centre y se expanda para llenar el ancho disponible, y la altura disponible, pero nunca crecer más en ambos lados.

Por ejemplo:

1. Una página alta y delgada tendría el contenido estirando todo el ancho mientras mantiene una altura proporcional.
2. Una página corta y amplia tendría el contenido estirando la altura completa, con un ancho proporcional.

Hay dos métodos que he estado viendo:

1. Use una imagen con la relación de aspecto correcta para expandir un contenedor div , pero no pude lograr que se comporte de la misma manera en los principales navegadores.
2. Configuración de un relleno de fondo proporcional, pero que solo funciona en relación con el ancho e ignora la altura. Simplemente sigue creciendo con el ancho y muestra barras de desplazamiento verticales.

Sé que podrías hacer esto con JS con bastante facilidad, pero me gustaría una solución pura de CSS.

¿Algunas ideas?

Answer 1

Ahora hay una nueva propiedad de CSS especificada para abordar esto: object-fit .

http://docs.webplatform.org/wiki/css/properties/object-fit

Todavía falta algo en el navegador ( http://caniuse.com/#feat=object-fit ); actualmente funciona en cierta medida en la mayoría de los navegadores excepto en Microsoft, pero dado el tiempo es exactamente lo que se requería para esta pregunta.

Answer 2

Entiendo que solicitó que le gustaría una solución específica de CSS . Para mantener la relación de aspecto, necesitarás dividir la altura por la relación de aspecto deseada. 16: 9 = 1.777777777778.

Para obtener la altura correcta para el contenedor, necesitarás dividir el ancho actual por 1.777777777778. Como no puede verificar el width del contenedor con solo CSS o dividir por un porcentaje es CSS , esto no es posible sin JavaScript (que yo sepa).

He escrito un script de trabajo que mantendrá la relación de aspecto deseada.

HTML

<div id="aspectRatio"></div>

CSS

body { width: 100%; height: 100%; padding: 0; margin: 0; }
#aspectRatio { background: #ff6a00; }

JavaScript

window.onload = function () {
    //Let''s create a function that will scale an element with the desired ratio
    //Specify the element id, desired width, and height
    function keepAspectRatio(id, width, height) {
        var aspectRatioDiv = document.getElementById(id);
        aspectRatioDiv.style.width = window.innerWidth;
        aspectRatioDiv.style.height = (window.innerWidth / (width / height)) + "px";
    }

    //run the function when the window loads
    keepAspectRatio("aspectRatio", 16, 9);

    //run the function every time the window is resized
    window.onresize = function (event) {
        keepAspectRatio("aspectRatio", 16, 9);
    }
}

Puede usar la function nuevamente si desea mostrar algo más con una relación diferente al usar

keepAspectRatio(id, width, height);

Answer 3

Mi pregunta original para esto fue cómo tener un elemento de aspecto fijo, pero para que quepa exactamente dentro de un contenedor específico, lo que lo hace un poco complicado. Si simplemente quiere que un elemento individual mantenga su relación de aspecto, es mucho más fácil.

El mejor método con el que me he encontrado es dandole a un elemento altura cero y luego usar el porcentaje relleno-inferior para darle altura. El relleno porcentual siempre es proporcional al ancho de un elemento, y no a su altura, incluso si está acolchado superior o inferior.

Propiedades de relleno W3C

Así que puede usar un ancho de porcentaje de un elemento para sentarse dentro de un contenedor, y luego relleno para especificar la relación de aspecto, o en otros términos, la relación entre su ancho y alto.

.object {
    width: 80%; /* whatever width here, can be fixed no of pixels etc. */
    height: 0px;
    padding-bottom: 56.25%;
}
.object .content {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 40px;
}

Entonces, en el ejemplo anterior, el objeto toma el 80% del ancho del contenedor, y luego su altura es del 56.25% de ese valor. Si su ancho era 160px, entonces el relleno inferior, y por lo tanto la altura sería 90px - un aspecto de 16: 9.

El pequeño problema aquí, que puede no ser un problema para usted, es que no hay espacio natural dentro de su nuevo objeto. Si necesita poner algo de texto, por ejemplo, y ese texto necesita tomar sus propios valores de relleno, debe agregar un contenedor dentro y especificar las propiedades allí.

Las unidades vw y vh no son compatibles con algunos navegadores más antiguos, por lo que la respuesta aceptada a mi pregunta podría no ser posible para usted y podría tener que usar algo más lo-fi.

Answer 4

Reformulando la respuesta de Danield en una Danield MENOS, para un uso posterior:

// Mixin for ratio dimensions    
.viewportRatio(@x, @y) {
  width: 100vw;
  height: @y * 100vw / @x;
  max-width: @x / @y * 100vh;
  max-height: 100vh;
}

div {

  // Force a ratio of 5:1 for all <div>
  .viewportRatio(5, 1);

  background-color: blue;
  margin: 0;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

Answer 5

Use las nuevas unidades de ventana CSS vw y vh (ancho de vista / altura de vista)

FIDDLE

Cambie el tamaño vertical y horizontalmente y verá que el elemento siempre llenará el tamaño máximo de ventana gráfica sin romper la proporción y sin barras de desplazamiento.

(PURE) CSS

div
{
    width: 100vw; 
    height: 56.25vw; /* height:width ratio = 9/16 = .5625  */
    background: pink;
    max-height: 100vh;
    max-width: 177.78vh; /* 16/9 = 1.778 */
    margin: auto;
    position: absolute;
    top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */
}

* {
  margin: 0;
  padding: 0;
}
div {
  width: 100vw;
  height: 56.25vw;
  /* 100/56.25 = 1.778 */
  background: pink;
  max-height: 100vh;
  max-width: 177.78vh;
  /* 16/9 = 1.778 */
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  /* vertical center */
  left: 0;
  right: 0;
  /* horizontal center */
}

<div></div>

Si desea utilizar un máximo de, por ejemplo, 90% de ancho y alto de la ventana FIDDLE : FIDDLE

* {
  margin: 0;
  padding: 0;
}
div {
  width: 90vw;
  /* 90% of viewport vidth */
  height: 50.625vw;
  /* ratio = 9/16 * 90 = 50.625 */
  background: pink;
  max-height: 90vh;
  max-width: 160vh;
  /* 16/9 * 90 = 160 */
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<div></div>

Además, el soporte del navegador también es bastante bueno: IE9 +, FF, Chrome, Safari- caniuse

Answer 6

Utilice una consulta de medios CSS @media junto con las unidades de vista CSS vw y vh para adaptarse a la relación de aspecto de la ventana gráfica. Esto tiene la ventaja de actualizar otras propiedades, como font-size , también.

Este violín muestra la relación de aspecto fija para el div y el texto que coincide exactamente con su escala.

El tamaño inicial se basa en el ancho completo:

div {
  width: 100vw; 
  height: calc(100vw * 9 / 16);

  font-size: 10vw;

  /* align center */
  margin: auto;
  position: absolute;
  top: 0px; right: 0px; bottom: 0px; left: 0px;

  /* visual indicators */
  background:
    url(data:image/gif;base64,R0lGODlhAgAUAIABAB1ziv///yH5BAEAAAEALAAAAAACABQAAAIHhI+pa+EPCwA7) repeat-y center top,
    url(data:image/gif;base64,R0lGODlhFAACAIABAIodZP///yH5BAEAAAEALAAAAAAUAAIAAAIIhI8Zu+nIVgEAOw==) repeat-x left center,
    silver;
}

Luego, cuando la ventana gráfica sea más ancha que la relación de aspecto deseada, cambie a la altura como medida base:

/* 100 * 16/9 = 177.778 */
@media (min-width: 177.778vh) {
  div {
    height: 100vh;
    width: calc(100vh * 16 / 9);

    font-size: calc(10vh * 16 / 9);
  }
}

Esto es muy similar al approach max-width max-height de @Danield, simplemente más flexible.

Answer 7

La respuesta de Danield es buena, pero solo se puede usar cuando el div llena toda la ventana gráfica, o usando un poco de calc , se puede usar si se conoce el ancho y alto del otro contenido en la ventana gráfica.

Sin embargo, al combinar el truco de margin-bottom con el método en la respuesta antes mencionada, el problema puede reducirse a solo tener que saber la altura del otro contenido. Esto es útil si tiene un encabezado de altura fija, pero el ancho de la barra lateral, por ejemplo, no se conoce.

body {
  margin: 0;
  margin-top: 100px; /* simulating a header */
}

main {
  margin: 0 auto;
  max-width: calc(200vh - 200px);
}

section {
  padding-bottom: 50%;
  position: relative;
}

div {
  position:absolute;
  background-color: red;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

<main>
  <section>
    <div></div>
  </section>
</main>

Aquí está en jsfiddle usando scss , lo que lo hace más obvio de donde provienen los valores.