Ir ao conteúdo
  • Cadastre-se
SethC

Mudar altura em resoluções menores (responsivo)

Recommended Posts

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:

1.png

 

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

 

2.png

 

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!

Compartilhar este post


Link para o post
Compartilhar em outros sites

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;
}
  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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!

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites
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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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:

 

ARVORE DO FACEBOOK.png

A legenda em cores explica cada bloco

 

Sabe se existem templates prontos pra isso? :)

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×