Ir para conteúdo
estilovirtual

Imagem fixa no topo sem distorcer

Recommended Posts

Olá pessoal bom dia, estou procurando e testando algumas formas de resolver um problemão aqui mas não estou conseguindo resolver.

 

O que eu preciso é o seguinte, eu tenho um site quero que ele fique com uma imagem no topo na largura de 100% e na altura de 520, so que ela se adapte a qualquer resolução e não fique distorcida, tenho a imagem original na largura de 3888x2592, so que o que acontece, a imagem fica distorcida, já tentei algumas dicas procurando na internet e aqui mesmo mas não deu certo, acho que não devo estar fazendo corretamente. 

 

Estou tentando da seguinte forma

 

<Style>
div{
    width:100%;
    height:520px;
}
.minhaClass{
background-position:0px 0px;
  background: url(foto_1.jpg) no-repeat center center;
  background-size:cover;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;

}

</Style>
<body>

<div class="minhaClass">
</div>
 
Já vi isso em alguns sites onde a imagem pega de fora a fora e não fica distorcida, já vi que da para fazer também com media queries onde para cada resolução ele joga uma imagem ,mas não tenho a imagem para cada, tenho somente esta única.
 
Alguem pode me ajudar?
 
Alan

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá! É Muito Simples, vamos fazer uma imagem responsiva, segue o código abaixo

#img {
	max-width:100%;
	height:auto;
}

Em max-width é o tamanho máximo que a imagem vai atingir, já que queira que ela ocupe todo o topo do Layout deixe como estar, espero ter ajudado ^^ 

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

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.