Redimensionamento via JS (2 slides)

http://pt.stackoverflow.com/q/4572/4220

by Gustavo Carvalho

HTML

<div id="wrap">
    <div class="left">Menu</div>
    <div class="right">
        <div class="ratio">
            <div class="slide">Aqui é minha area proporcional</div>
            <div class="slide2">Aqui é minha  segunda area proporcional</div>
        </div>
    </div>
    <div id="push"></div>
</div>
<div id="footer">
    <div class="container">
        <p class="muted credit">
            <p>Rodapé</p>
        </p>
    </div>
</div>

CSS

body, html {
    height: 100%;
    margin: 0 0 0 0;
}
#wrap {
    margin: 0 auto -60px;
    min-height: 100%;
    overflow: hidden;
    height: 100%;
}
#footer {
    background: #ccc !important;
    position: relative;
}
#footer .container p {
    margin-top: 21px;
    text-align: center;
    color: #808080;
}
#push, #footer {
    height: 61px;
}
.left {
    width: 20%;
    background: red;
    height: 100%;
    float: left;
}
.right {
    width: 80%;
    height: 100%;
    float: left;
    background: orange;
}
.right .slide {    
    background: #a0d;
}
.right .slide2 {    
    background: #f2f;
}
.right .ratio {
    max-height: 715px;
}

JavaScript

var slide = document.querySelector('.slide');
  var slide2 = document.querySelector('.slide2');
  
  var aspectRatio = 720/540;  // proporção de aspecto do div .slide

  function resize() {
      // verifica as funcoes
      var newHeight = document.documentElement.offsetHeight-39; // espaço ocupado pelo footer
      var newWidth = 0.8 * (document.documentElement.offsetWidth); // largura disponível: 80% do documento
      newHeight/=2; // divide a altura pelo número de slides
      
      var newWidthToHeight = newWidth / newHeight;
      
      // ajusta o div mantendo as proporções de aspecto definidas por aspectRatio      
      if (newWidthToHeight > aspectRatio) {
        newWidth = newHeight * aspectRatio;
      } else {
        newHeight = newWidth / aspectRatio;        
      } 
      slide.style.width = newWidth + 'px';
      slide.style.height = newHeight + 'px';
      
      // redimensione cada um dos slides
      slide2.style.width = newWidth + 'px';
      slide2.style.height = newHeight + 'px';
  }
  
  // efetua um redimensionamento inicial
  resize();

  // redimensiona o slide sempre que a janela for redimensionada
  window.addEventListener('resize', resize, false);

  // (!) utilize a função resize sempre que o div .slide sofrer alterações