Maintenir le ratio d'aspect d'un div en CSS

vw unités:

Vous pouvez utiliser vw unités pour la la largeur et la hauteur de l'élément. Cela permet à l'élément de l'aspect ratio d'être conservé, basé sur la largeur de la fenêtre d'affichage.

vw : 1/100e de la largeur de la fenêtre d'affichage. [MDN]

Alternativement, vous pouvez également utiliser vh pour la fenêtre d'affichage de la hauteur, ou même vmin/vmax à utiliser l'inférieure/supérieure de la fenêtre d'affichage dimensions (discussion ici).

Exemple: 1:1 ratio d'aspect

CSS:

div {
  width: 20vw;
  height: 20vw;
  background: gold;
}

HTML:

<div></div>

Pour les autres formats, vous pouvez utiliser le tableau suivant pour calculer la valeur de la hauteur en fonction de la largeur de l'élément :

aspect ratio  |  multiply width by
-----------------------------------
     1:1      |         1
     1:3      |         3
     4:3      |        0.75
    16:9      |       0.5625

Exemple: grille de 4 × 4 carré divs

CSS:

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
div {
  width: 23vw;
  height: 23vw;
  margin: 0.5vw auto;
  background: gold;
}

HTML:

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

Ici est un Jouer avec cette démo et voici une solution pour faire un grille souple de carrés avec verticaly et horizontaly centrée sur le contenu.

---

Prise en charge du navigateur pour vh/vw unités est IE9+ voir canIuse pour plus d'info

À ajouter à Web_Designer réponse, le <div> auront une hauteur (entièrement composé de remplissage en bas) de 75% de la largeur de la élément contenant. Voici un bon résumé: http://mattsnider.com/css-using-percent-for-margin-and-padding/. Je ne sais pas pourquoi il devrait en être ainsi, mais c'est comment il est.

Si vous voulez que votre div à une largeur de 100%, vous avez besoin d'un autre habillage de la div sur lequel l'largeur:

div.ar-outer{
    width: 60%; /* container; whatever width you want */
    margin: 0 auto; /* centered if you like */
}
div.ar {
    width:100%; /* 100% of width of container */
    padding-bottom: 75%; /* 75% of width of container */
    position:relative;
}
div.ar-inner {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

J'ai utilisé quelque chose de semblable à Elliot image du truc récemment pour me permettre d'utiliser les CSS media queries pour servir un autre fichier du logo en fonction de la résolution du périphérique, mais encore à l'échelle proportionnellement comme un <img>, naturellement, de faire (j'ai mis le logo comme image d'arrière-plan transparente .png avec le ratio d'aspect). Mais Web_Designer la solution de me sauver d'une requête http.

Comme indiqué dans ici w3schools.com et un peu rappelé dans ce accepté de répondre à, les valeurs de remplissage sous la forme de pourcentages (l'emphase est mienne):

Spécifie la marge en pourcentage de la largeur de la élément contenant

Ergo, un bon exemple d'un réactif DIV qui garde un aspect ratio 16:9 est comme suit:

CSS

.parent {
    position: relative;
    width: 100%;
}
.child {
    position: relative;
    padding-bottom: calc(100% * 9 / 16);
}
.child > div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

HTML

<div class="parent">
    <div class="child">
        <div>Aspect is kept when resizing</div>
    </div>
</div>

Démo sur JSFiddle

Vous pouvez utiliser un svg. Le récipient/wrapper position relative, mettre la svg d'abord comme staticly positionné et puis mettre en position absolue de contenu (top: 0; left:0; right:0; bottom:0;)

Exemple 16:9 proportions:

image.svg: (peut être incorporé dans src)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 9" width="16" height="9"/>

CSS:

.container {
  position: relative;
}
.content {
  position: absolute;
  top:0; left:0; right:0; bottom:0;
}

HTML:

<div class="container">
  <img style="width: 100%" src="image.svg" />
  <div class="content"></div>
</div>

Noter que inline svg ne semble pas fonctionner, mais vous pouvez urlencode le svg et de l'intégrer dans img src attribut comme ceci:

<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%209%22%20width%3D%2216%22%20height%3D%229%22%2F%3E" style="width: 100%;" />

C'est une amélioration sur le acceptées réponse:

• Utilise des éléments pseudo au lieu de wrapper divs
• Le ratio d'aspect est basée sur la largeur de la boîte à la place de son parent
• La boîte s'étirer verticalement lorsque le contenu est plus grande

CSS:

.box {
  margin-top: 1em;
  margin-bottom: 1em;
  background-color: #CCC;
}

.fixed-ar::before {
  content: "";
  float: left;
  width: 1px;
  margin-left: -1px;
}
.fixed-ar::after {
  content: "";
  display: table;
  clear: both;
}

.fixed-ar-16-9::before {
  padding-top: 56.25%;
}
.fixed-ar-3-2::before {
  padding-top: 66.66%;
}
.fixed-ar-4-3::before {
  padding-top: 75%;
}
.fixed-ar-1-1::before {
  padding-top: 100%;
}

.width-50 {
  display: inline-block;
  width: 50%;
}
.width-20 {
  display: inline-block;
  width: 20%;
}

HTML:

<div class="box fixed-ar fixed-ar-16-9">16:9 full width</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-3-2 width-20">3:2</div>
<div class="box fixed-ar fixed-ar-4-3 width-20">4:3</div>
<div class="box fixed-ar fixed-ar-1-1 width-20">1:1</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>

Juste une idée ou un hack.

CSS:

div {
background-color: blue;
width: 10%;
transition: background-color 0.5s, width 0.5s;
font-size: 0;
}
div:hover {
width: 20%;
background-color: red;
}
img {
width: 100%;
height: auto;
visibility: hidden;
}

HTML:

<div>
<!-- use an image with target aspect ratio. sample is a square -->
<img src="http://i.imgur.com/9OPnZNk.png" />
</div>

Alors que la plupart des réponses sont très cool, la plupart d'entre eux nécessitent de disposer d'une image déjà correctement dimensionné... d'Autres solutions que de travailler pour une largeur et ne se soucient pas de la hauteur disponible, mais parfois vous voulez ajuster le contenu dans une certaine hauteur trop.

J'ai essayé de couple ensemble pour apporter un entièrement portable et re-extensible solution... L'astuce est à utiliser pour la mise à l'échelle automatique de l'image, mais l'utilisation d'insertion de l'élément svg au lieu d'utiliser un pré-rendu de l'image ou de toute forme de deuxième requête HTTP...

CSS:

div.holder{
background-color:red;
display:inline-block;
height:100px;
width:400px;
}
svg, img{
background-color:blue;
display:block;
height:auto;
width:auto;
max-width:100%;
max-height:100%;
}
.content_sizer{
position:relative;
display:inline-block;
height:100%;
}
.content{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background-color:rgba(155,255,0,0.5);
}

HTML:

<div class="holder">
<div class="content_sizer">
<svg width=10000 height=5000 />
<div class="content">
</div>
</div>
</div>

Vous remarquerez que j'ai utilisé des valeurs dans les attributs width et height de l'SVG, comme il doit être plus grand que le maximum de la taille attendue comme elle seule peut le réduire. L'exemple fait de la div du ratio de 10:5

Je suis tombé sur une solution intelligente à l'aide de <svg> et display:grid.

Élément de grille permet d'occuper le même espace avec deux (ou plus) éléments, sans avoir besoin de préciser laquelle définit la hauteur. Ce qui signifie que, hors de la boîte, le plus haut définit le rapport.

Cela signifie que vous pouvez l'utiliser comme quand vous savez que le contenu ne sera jamais assez grand pour remplir la totalité de la "ratio" et vous êtes simplement à la recherche d'un moyen de placer le contenu dans cet espace (c'est à dire pour les centrer sur les deux directions utiliser
display:flex; align-items:center; justify-content:center).

C'est à peu près la même qu'à l'aide d'un transparent <img> avec display:block et prédéterminée rapport, à l'exception de la <svg> est plus léger et beaucoup plus facile à modifier (changer le rapport de réactivité, si vous en avez besoin).

<div class="ratio">
<svg viewBox="0 0 1 1"></svg>
<div>
I'm square
</div>
</div>

.ratio {
display: grid;
}
.ratio > * {
grid-area: 1/1/1/1;
}

Tout ce que vous devez faire est de changer le <svg>s ratio:

• <svg viewBox="0 0 4 3"></svg>
• <svg viewBox="0 0 16 9"></svg>

De voir leur fonctionnement:

CSS:

.ratio {
display: grid;
}
.ratio > * {
grid-area: 1/1/1/1;
}
/* below code NOT needed for setting the ratio 
* I just wanted to mark it visually
* and center contents
*/
.ratio div {
border: 1px solid red;
display: flex;
align-items: center;
justify-content: center;
}

HTML:

<div class="ratio">
<svg viewBox="0 0 7 1"></svg>
<div>
Fixed ratio 7:1
</div>
</div>

---

Si vous avez besoin d'une solution dans laquelle l'élément de contenu n'est pas autorisé à définir le rapport quand il est plus grand (avec trop-plein caché ou auto), vous devez définir position:relative sur la grille et position:absolute; height:100%; overflow-y: auto; sur le contenu. Exemple:

CSS:

.ratio {
display: grid;
position: relative;
}
.ratio > * {
grid-area: 1/1/1/1;
}
.ratio > div {
height: 100%;
overflow-y: auto;
position: absolute;
/* the rest is not needed */
border: 1px solid red;
padding: 0 1rem;
}

HTML:

<div class="ratio">
<svg viewBox="0 0 7 1"></svg>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A scelerisque purus semper eget. Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. A cras semper auctor neque vitae tempus quam pellentesque nec. Morbi enim nunc faucibus a pellentesque sit amet porttitor. Arcu odio ut sem nulla. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Cras tincidunt lobortis feugiat vivamus at augue eget. Laoreet sit amet cursus sit amet. Amet nulla facilisi morbi tempus iaculis urna id volutpat. Leo in vitae turpis massa sed elementum tempus egestas sed. Egestas integer eget aliquet nibh. Dolor sit amet consectetur adipiscing elit.
<p>Ut aliquam purus sit amet. Eget magna fermentum iaculis eu non diam phasellus vestibulum. Diam in arcu cursus euismod quis viverra nibh. Nullam vehicula ipsum a arcu cursus vitae congue. Vel orci porta non pulvinar neque laoreet suspendisse. At tellus at urna condimentum mattis pellentesque. Tristique senectus et netus et malesuada. Vel pretium lectus quam id leo in. Interdum velit euismod in pellentesque. Velit euismod in pellentesque massa placerat duis. Vitae suscipit tellus mauris a diam maecenas sed enim.
<p>Mauris a diam maecenas sed enim ut sem. In hendrerit gravida rutrum quisque. Amet dictum sit amet justo donec enim diam. Diam vulputate ut pharetra sit amet aliquam id. Urna porttitor rhoncus dolor purus non enim praesent. Purus in massa tempor nec feugiat nisl pretium. Sagittis vitae et leo duis ut. Facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris. Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum. Aliquam purus sit amet luctus venenatis lectus magna. Sit amet purus gravida quis blandit turpis. Enim eu turpis egestas pretium aenean. Consequat mauris nunc congue nisi. Nunc sed id semper risus in hendrerit gravida rutrum. Ante metus dictum at tempor. Blandit massa enim nec dui nunc mattis enim ut.
</div>
</div>

Dire que vous pour maintenir Width: 100px et Height: 50px (c'est à dire, 2:1)
Faire ce calcul:

.pb-2to1 {
padding-bottom: calc(50 / 100 * 100%); //i.e., 2:1
}

Vous pouvez utiliser le flux d'aménagement (TA).

https://en.wikipedia.org/wiki/Adaptive_web_design

Il sera mis à l'échelle et de maintenir la mise en page, c'est un peu complexe, mais qui permet une page pour redimensionner sans pousser le contenu, comme l' (RWD).

Il ressemble réactif mais il est de mise à l'échelle. https://www.youtube.com/watch?v=xRcBMLI4jbg

Vous pouvez trouver le CSS de mise à l'échelle de la formule ici:

http://plugnedit.com/pnew/928-2/

Si l'ensemble de la structure du conteneur a été basée sur les pourcentages, ce serait le comportement par défaut, vous pouvez donner un exemple plus spécifique?

Ci-dessous est un exemple de ce que je veux dire, si l'ensemble de votre hiérarchie parent a été % à base, de n'importe quel navigateur de la fenêtre de réglage de la fonctionnerait sans js/css, n'est-ce pas une possibilité avec votre mise en page?

<div style="width: 100%;">
<div style="width: 50%; margin: 0 auto;">Content</div>
</div>