12

Minha div que aumenta ou diminui proporcionalmente está com estilo de:

padding-bottom: 75%;

Olhem esse exemplo: JSFiddle

O que eu quero é que a div que cresce proporcionalmente trave o tamanho, quando encostar no rodapé. Senão fizer isso, ela cresce infinitamente.

Alguma solução?


Screens: primeira imagem Primeira fase esta ok.

segunda imagem Nessa segunda imagem, perceba que ele encostou no rodapé, ou seja, é pra ele travar com esse tamanho ficando como a terceira imagem.

terceira imagem

0

3 Respostas 3

3

Veja o resultado no JSFiddle, utilizando Javascript puro para manipular as propriedades CSS do elemento slide.

Note que a propriedade padding-bottom: 75%; da classe slide foi removida, uma vez que as dimensões do slide são controladas por script.

Abaixo, segue o script que realiza a tarefa:

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

Sempre que um elemento precisar ser redimensionado de acordo com uma proporção de aspecto("aspect ratio"- em inglês), pode-se utilizar uma estratégia semelhante.

Não sei se é possível conseguir os mesmos resultados através de CSS Media Queries ou outra estratégia que utilize puramente CSS, mas caso seja possível prefira sempre o uso de CSS.

4
  • Observação: O script acima não é 100% cross-browser, uma vez que querySelector e document.documentElement.offsetWidth podem não estar disponíveis em navegadores mais antigos mas é bem simples ajustá-lo conforme a necessidade, podendo por exemplo utilizar jQuery, caso já o utilize no documento em questão. =) 7/02/2014 às 6:56
  • perfeito @GustavoCarvalho, só um probleminha. O body esta com uma margin, como a removo? Coloquei um margin:0 nele, só que dai o slide fica com um espaço entre a lateral direita. 7/02/2014 às 12:27
  • Outra coisa, vou ter duas classes slide e só funciona na primeira. 7/02/2014 às 13:12
  • @JeffersonAlison, Para remover a margem do body basta adicionar no CSS do body margin: 0 0 0 0; Mas aí tem que ajustar no script em newWidth(o desconto de 16 era dado por conta da margem, confira a resposta atualizada). Para mais de um slide basta dividir a altura disponível pelo número de slides. Confira neste FIDDLE. 7/02/2014 às 22:17
1

O melhor modo de fazer isso é usar CSS media queries, não javascript. Por favor, evitem sugerir fazer em javascript algo que pode ser feito em CSS puro. Javascript adiciona complexidade adicional e deve ser evitada caso exista meios mais simples.

É mais simples e funciona em todo lugar, e mesmo quando não funcionar e o desenvolvedor fizer questão de que funcione em navegadores antigos como IE8, também seria necessário javascript para forçar o funcionamento.

Em https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries tem um guia bom sobre Media Queries.

Um exemplo muito curto a respeito disso:

/* entre 1024px e 1200px uma barra lateral seria ocultada */
@media (min-width: 1024px) and (max-width: 1200px){
    .sidebar-b {
      display: none;
  }
}
4
  • Concordo plenamente que se deve usar CSS quando der para usar. Mas neste caso não vejo como não usar JS. Pode tentar dar um exemplo com CSS usando o jsFiddle do Jefferson?
    – Sergio
    6/02/2014 às 22:21
  • 1
    Se o @Jefferson Alison informar os pontos de quebra e o seletor dos elementos a serem quebrados, faço sim. 6/02/2014 às 22:42
  • @EmersonRochaLuiz, você diz os pontos de quebra tipo: "ah la em 1024px de width esta quebrando, la em 1200px está quebrando" ? 7/02/2014 às 11:57
  • Ex: w > 0 && w <= 768px: Imagem 1; w > 768px && w < 1200px: imagem 2; e assim por diante onde w é largura da tela em px ou em (caso use em) 8/02/2014 às 16:16
1

Para fazer isso você terá que usar algumas coisas e um pouco de matemática.

Você pode pegar o tamanho dos elementos de 3 formas:

  1. $(ele).height - Não contabiliza as medidas do padding, border e margin;
  2. $(ele).innerHeight - Não contabiliza as medidas do border e margin, mas contabiliza o padding;
  3. $(ele).outerHeight - Não contabiliza as medidas da margin por padrão, mas aceita um parâmetro que permite contabilizar;

Sabendo disso, você pode obter o tamanho do window (viewport) ou do document (página inteira). A diferença entre os dois é que window é o tamanho da área visível no browser e document é da página toda, mesmo dos elementos escondidos por conta da posição.

Com essas informações, basta você definir uma regra (e um momento para executar essa regra) onde seu código avalie o tamanho do viewport ou do document e estabeleça o max-height do elemento que não pode crescer demais.

Você pode executar a função por exemplo toda vez que algo for escrito naquele elemento, ou apenas no DOMReady da página.

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .