Maintenir le ratio d'aspect de la div mais de remplir la largeur de l'écran et de la hauteur en CSS?

Utiliser le nouveau CSS fenêtre d'affichage unités vw et vh (fenêtre d'affichage de la largeur /hauteur de la fenêtre d'affichage)

VIOLON

Redimensionner verticalement et horizontalement, et vous verrez que l'élément sera toujours remplir le maximum de la taille de la fenêtre sans casser le ratio et sans les barres de défilement!

(PUR) 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 */
}

CSS:

* {
  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 */
}

HTML:

<div></div>

Si vous souhaitez utiliser un maximum de 90% de la largeur et de la hauteur de la fenêtre d'affichage: VIOLON

CSS:

* {
  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;
}

HTML:

<div></div>

Aussi, prise en charge du navigateur est très bonne aussi: IE9+, FF, Chrome, Safari- caniuse

Utiliser un CSS media query @media avec le CSS fenêtre d'affichage unités vw et vh de s'adapter à l'aspect ratio de la fenêtre d'affichage. Ceci a l'avantage de mettre à jour d'autres propriétés, comme la font-size, trop.

Ce violon montre les proportions fixes pour la div, et le texte correspondant à son échelle exactement.

Taille initiale est basée sur la pleine largeur:

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;
}

Puis, lorsque la fenêtre est plus large que le format d'image désiré, passez à hauteur de la base de mesure:

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

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

Ceci est très similaire dans la veine de la max-width et max-height approche par @Danield, juste un peu plus flexible.

Je comprends que vous avez demandé à qui vous souhaitez un CSS solution spécifique. Pour conserver les proportions, vous devez diviser la hauteur souhaité par le ratio d'aspect. 16:9 = 1.777777777778.

Pour obtenir la bonne hauteur pour le conteneur, vous devez diviser la largeur actuelle par 1.777777777778. Puisque vous ne pouvez pas vérifier la width du récipient avec juste CSS ou diviser par un pourcentage est CSS, ce n'est pas possible sans JavaScript (à ma connaissance).

J'ai écrit un travail de script qui permettra de conserver le format d'image désiré.

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);
    }
}

Vous pouvez utiliser le function de nouveau si vous souhaitez afficher quelque chose d'autre avec un ratio différent en utilisant

keepAspectRatio(id, width, height);

Danield réponse est bon, mais il ne peut être utilisé lorsque la div remplit l'ensemble de la fenêtre d'affichage, ou en utilisant un peu de calc, peuvent être utilisés si la largeur et la hauteur de l'autre le contenu dans la fenêtre d'affichage est connu.

Toutefois, en combinant les margin-bottom truc avec la méthode de ladite réponse, le problème peut être réduit à devoir connaître la hauteur de l'autre contenu. Ceci est utile si vous avez une hauteur fixe-tête, mais la largeur de la barre latérale, par exemple, n'est pas connu.

CSS:

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;
}

HTML:

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

Ici, il est dans un jsfiddle à l'aide de scss, ce qui rend plus évident où viennent les valeurs de.