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


My% w / w that increases or decreases proportionally is in the style of:

padding-bottom: 75%;

Look at this example: JSFiddle

What I want is that the div that grows proportionally will lock the size when it hits the footer. If you do this, it grows endlessly.

Any solution?

Screens: Firstphaseisok.

In this second image, notice that it touched the footer, that is, it is for it to lock with this size being like the third image.

asked by anonymous 06.02.2014 / 15:09

3 answers


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;
    } = newWidth + 'px'; = newHeight + 'px';

// efetua um redimensionamento inicial

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

07.02.2014 / 07:49

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;
06.02.2014 / 23:03

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:

  • $(ele).height - Does not count padding, border, and margin measures;
  • $(ele).innerHeight - Does not count border and margin measures, but counts padding;
  • $(ele).outerHeight - Does not count the measures of the margin by default, but accepts a parameter that allows counting;
  • 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.

    06.02.2014 / 16:24