Módulo

Imagem do Jumbotron

Descrição

O módulo Jumbotron é um elemento de bloco com uma imagem dentro, que ocupa no máximo 100% da altura e largura da tela, se adaptando a diferentes resoluções de tela respeitando as proporções da imagem.

Uso

Adicione um link para o arquivo WebModules.css dentro do node <head> da sua página:

        
  <head>
    <link rel="stylesheet" href="caminho/para/WebModules.css">
  </head>

Depois é só atribuir a classe .wm-jumbotron a um elemento de bloco com uma imagem dentro:

        
  <div class="wm-jumbotron">
    <img src="http://www.fnordware.com/superpng/pnggrad16rgba.png">
  </div>

Comportamento

O módulo Jumbotron ocupa nativamente 100% da altura e da largura da tela, adaptando sua altura de acordo com a altura da imagem proporcional a largura da tela.

Para alterar a altura do módulo, é necessário mudar o valor da propriedade max-height da classe .wm-jumbotron para o valor desejado.
Exemplo:

        
  /* Antes: */

  .wm-jumbotron {
    background-color: rgba(0, 0, 0, .1);
    max-height: 100vh; /* 100% da altura da tela */
    overflow-y: hidden;
    width: 100%;
  }

  /* Depois: */

  .wm-jumbotron {
    background-color: rgba(0, 0, 0, .1);
    max-height: 70vh; /* Agora ele tem uma altura de 70% */
    overflow-y: hidden;
    width: 100%;
  }

Log das versões