Jump to content
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

Share this post


Link to post
Share on other 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 ^^ 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.