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

Question

My div which increases or decreases proportionally is with style:

padding-bottom: 75%;

Look at this example: Jsfiddle

What I want is that the div that grows proportionately lock the size, when you touch the footer. Otherwise, it grows infinitely.

Some solution?

---

Screens: First phase this ok.

In this second image, notice that he touched the footer, IE, it is for him to lock with this size staying as the third image.

Answer 1

See the result on Jsfiddle, using pure Javascript to manipulate the CSS properties of the slide element.

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

Below, follow 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 resized according to an aspect ratio("Aspect ratio"- in English), a similar strategy may be used.

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

Answer 2

The best way to do so is to use CSS media queries, not javascript. Please avoid suggesting doing 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 doesn’t work and the developer makes sure it works on older browsers like IE8, it would also need javascript to force the operation.

In https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries has a good guide on Media Queries.

A very short example of this:

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

Answer 3

To do this you will have to use a few things and a little math.

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

1. $(ele).height - Does not count padding, border and margin measures;
2. $(ele).innerHeight - Does not count border and margin measures, but accounts for padding;
3. $(ele).outerHeight - Does not account for margin measures by default, but accepts a parameter that allows accounting;

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

With this information, you just need to define a rule (and a time to execute this rule) where your code evaluates the size of the viewport or Document and establishes the max-height of the element that cannot grow too much.

You can run the function for example every time something is written on that element, or just on DOMReady page.