How do I set a max-width to a div that increases and decreases proportionally?

See the result in JSFiddle , using pure Javascript to manipulate the CSS properties of the slide element .

Note that the padding-bottom: 75%; property of the slide class has been removed , since the dimensions of the slide are controlled by script.

Below is the script that performs the task:

var slide = document.querySelector('.slide'); 

var aspectRatio = 720/540;  // ou (4:3) proporção de aspecto do div .slide

function resize() {
    // dimensões da janela disponíveis
    var newHeight = document.documentElement.offsetHeight - 39; // 39 é o espaço ocupado pelo footer
    var newWidth = 0.8 * (document.documentElement.offsetWidth); // largura disponível: 80% do documento
    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';
}

// 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

Whenever an element needs to be scaled according to an aspect ratio, a similar strategy can be used.

I do not know if it is possible to achieve the same results through CSS Media Queries or another strategy that uses pure CSS, but if you can, always use CSS.

The best way to do this is to use CSS media queries , not javascript. Please avoid suggesting to javascript something that can be done in pure CSS. Javascript adds additional complexity and should be avoided if simpler means exist.

It's simpler and works everywhere, and even when it does not work and the developer makes sure it works in legacy browsers like IE8, it would also require javascript to force it to work.

In link has a good guide to Media Queries.

A very short example about this:

/* entre 1024px e 1200px uma barra lateral seria ocultada */
@media (min-width: 1024px) and (max-width: 1200px){
    .sidebar-b {
      display: none;
  }
}

To do this you will have to use some things and a bit of math.

You can take the size of the elements in 3 ways:

Knowing this, you can get the size of the window (viewport) or document (full page). The difference between the two is that window is the size of the area visible in the browser and document is the entire page, even the hidden elements per account position.

With this information, you simply define a rule (and a time to execute this rule) where your code evaluates the size of the viewport or document and sets the max-height of the element that can not grow too much.

You can run the function, for example, every time something is written to that element, or only in DOMReady of the page.