Mudar altura em resoluções menores (responsivo)

[SethC]

Eu tenho um fórum phpbb (ainda está em localhost, por isso não posso postar link pra ajuda ser mais eficaz) e no perfil do usuário fiz grandes modificações em HTML e CSS. E com isso precisei adaptar pra ficar responsivo. Ok, eu consegui adaptar a maioria dos códigos pra resoluções menores que 960px, no entanto, o header eu não consigo. Vou dar mais detalhes:

 

Eu criei uma função que permite o usuario postar o link de uma foto e essa foto aparece como foto de capa. O html e css pra exibir a foto de capa é esse:

 

<!-- IF S_PROFILE_BACKGROUND -->
<div class="fp-profile-background-image" style="background-image:url({PROFILE_BACKGROUND_VALUE_RAW});"></div><!-- ELSE --> <div class="fp-profile-background-image" style="height:300px;background:#1B2F42;"></div>
<!-- ENDIF -->

 

.fp-profile-background-image {
   height:350px;
    position: relative;
   background-size: 100% auto;
   background-repeat: no-repeat;
   background-position: center center;
}

E o resultado no desktop é esse (a foto de fundo é a de Alice in wonderland:

 

Porém, em resoluções menores que a do desktop (960px) o resultado fica assim:

 

 

Esse simulador simula a resolução de um smartphone e em 480 de altura, fica aquele espaço enorme na div da foto de capa;background

 

Eu imagino que seja porque mesmo na resolução diminuida, a height 350px não tá se adaptando automaticamente.

 

Como eu faço pra que no em resolução maior que 960px o height da div da foto de capa seja 350px e em resoluçoes menores o height seja adaptável, tipo sem ficar esse espaço em branco aí.

 

Agradeço pela ajuda!

[Nihal]

O seu problema é essa regra de altura. Normalmente se usa media queries para esse tipo de situação, mas o jeito como o código foi escrito não ajuda. Não há como detectar a altura de imagens usadas como background em css, então você teria que usar js, definir outras alturas para faixas de resolução (que ainda daria sobras) ou reestruturar.

As duas soluções mais simples são:

 

Usar um elemento <img>

É a solução mais simples caso você já valide as dimensões da imagem.

<div class="fp-profile-background-image"><img src="{PROFILE_BACKGROUND_VALUE_RAW}" class="custom-header" /></div><!-- ELSE --> <div class="fp-profile-background-image" style="height:300px;background:#1B2F42;"></div>

E o css:

.fp-profile-background-image {
  width: 100%;
  overflow: auto;
}
.fp-profile-background-image > .custom-header {
  width: 100%;
}

A vantagem é que ela sempre redimensionará perfeitamente para a resolução usada, sem sobras ou cortes. O elemento imagem terá sua largura limitada pela largura da div mãe (que terá a largura limitada pelo elemento que a contém ou da tela), e sem nenhuma altura definida será redimensionada de acordo. Você pode até eliminar a div fp-profile-background-image se quiser, usando o <img> e adaptando as classes de acordo.

 

Background-size: cover

Com essa opção a imagem sempre ocupará 100% do tamanho do elemento. Como o ratio muda em resoluções menores parte dela será recortada em determinadas situações, o que pode ser ou não um problema. A altura permanecerá a mesma definida no CSS.

.fp-profile-background-image {
  background-size: cover;
}

[SethC]

@Nihal muito obrigado!

 

Nossa, eu tava já desistindo. Eu fiz com a primeira opção e funcionou perfeitamente. Só que como eu não entendi muito bem (eu sou nivel intermediário em css, então, algumas coisas eu bugo kkkk). Por exemplo, com a primeira opção e usando a tag <img>, a altura da foto de capa será redimensionada ou a imagem toda?

 

Já com o background-size:cover a altura que eu defini na div será respeitada?

 

Mais uma vez obrigadão!

[Nihal]

A imagem toda. Quando você determina a altura ou largura de uma imagem sem definir o outro atributo ela é redimensionada proporcionalmente.

O que essa regra está dizendo é que a imagem ocupará 100% de largura (do elemento que a contém), e neste caso esta largura muda ao redimensionar a tela, portanto a altura mudará para acompanhar a mudança da largura. Antes a altura estava fixa em 350px e em telas menores onde a imagem ficava menor que isso acontecia o espaço em branco.

 

Já para a segunda opção você pode ver um demo aqui: Cover demo.

Redimensione a janela e observe o que acontece com a imagem de fundo. Esse exemplo foi retirado deste artigo do CSS Tricks.

[SethC]

14 horas atrás, Nihal disse:

A imagem toda. Quando você determina a altura ou largura de uma imagem sem definir o outro atributo ela é redimensionada proporcionalmente.

O que essa regra está dizendo é que a imagem ocupará 100% de largura (do elemento que a contém), e neste caso esta largura muda ao redimensionar a tela, portanto a altura mudará para acompanhar a mudança da largura. Antes a altura estava fixa em 350px e em telas menores onde a imagem ficava menor que isso acontecia o espaço em branco.

 

Já para a segunda opção você pode ver um demo aqui: Cover demo.

Redimensione a janela e observe o que acontece com a imagem de fundo. Esse exemplo foi retirado deste artigo do CSS Tricks.

Agora entendi. Vou testar o segundo método, mas ao que parece o primeiro continua sendo melhor.

[SethC]

@Nihal sei que a duvida foi esclarecida e eu agradeço muito

 

mas ainda sobre esse header, você sabe se tem algum lugar onde eu encontro um header pronto com css e html inclusive responsivo, semelhante ao do facebook?

 

Mas não precisa ser nas cores, só a estrutura mesmo

 

Cover photo (já feito)

Foto pessoal e ao lado nome da pessoa

E abaixo coluna com informações do usuário

 

Eu fiz uma ilustração do esqueleto, seria assim:

 

A legenda em cores explica cada bloco

 

Sabe se existem templates prontos pra isso?

[Nihal]

Aí já não faço ideia. Não mexo com fóruns há um bom tempo, e normalmente quando preciso fazer coisas do tipo escrevo o código do zero. Dê uma olhada em mods e estilos para o phpbb.

[Ebsturbius]

Esse problema já é antigo, o ideal é fazer o site para menor resolução, e depois pedir pra ele alongar para as maiores resoluções. Você da um resize desse no código é 100% de CPU.