How to increase or decrease div proportional to 720x540?

The simplest way to create this effect is to add the style padding-bottom to the equivalent height percentage divided by the desired width.

div#slide {
  padding-bottom: 75%; /* 540/720 */
}

So, even after resizing the window, the size of the div will always be proportional to 720: 540.

Example: JSFiddle .

With a little Javascript you can ensure that the element has the ratio of 4: 3 setting one of the dimensions (that is, either the width or the height).

I made an example (which can be tested in this JSFiddle - simply drag the border of the Result to adjust the dimensions of the display) where the width of the div is adjusted to the display area of the browser window and the height is calculated based on this new width and the desired ratio (% with%). p>

The 3/4 = 0,75 (which represents the element in which you display your PPT):

<div id="teste">
    Olá mundo!
</div>

It has the style defined like this (includes the style of the "page" example):

body {
    margin: 5px;
    background-color: black;
    overflow: hidden;
}

#teste {
    background-color: red;
    display:inline-block;
    width: 720px;
    height: 540px;
    color: white;
    text-align: center;
    line-height: 540px;
}

And the div code that adjusts the ratio is this:

var adjustSize = function() {
    var oDiv = document.getElementById("teste");

    var iWidth = window.innerWidth - 10; // Desconta duas vezes o tamanho da borda
    var iHeight = iWidth * 0.75; // Mantém o aspecto 4:3 para a largura (width) fixa

    oDiv.style.width = iWidth.toString() + "px";
    oDiv.style.height = iHeight.toString() + "px";
    oDiv.style.lineHeight = oDiv.style.height;
}

window.onresize = adjustSize;
adjustSize();

You can determine the dimensions in percentage, so it is adaptable to browser resizing:

div { width: 80%; height: 80%; border: 1px solid black; }

You can use a CSS Framework for this purpose, such as Twitter Bootstrap , examples of which you can find at this link:

link

For example:

(...)
<--! inclui o css do twitter-bootstrap, você também pode baixar ele e instalar direto no seu site -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
(...)
<div class="container-fluid">
  <div class="row">
      <div class="col-md-12">
          <!-- conteúdo aqui -->
      </div>
  </div>
</div>

If your slide is an image you can put img with width: 100% and height: auto , it would look like this:

img { width: 100%; height: auto; }

But if it is not an image, if it is, for example, a div that contains a call to a flash , you will have to do in js .

In jQuery it would look like this:

First the css .

div { width: 100%; }

Then% w / o, according to the given ratio, the height will always be 75% of the width.

$(function(){

    var largura = $('div').width();
    var altura  = ( 75 * largura ) / 100;

    $('div').css('height', Math.round(altura) + 'px');

});

In case you want the window to change size, js , add the code below to js

$( window ).resize(function() {

    var largura = $('div').width();
    var altura  = ( 75 * largura ) / 100;

    $('div').css('height', Math.round(altura) + 'px');

});

Example in the jsfiddle , if you resize the window, you will see that the% red_with% of the black appears.