Imagem fixa no topo sem distorcer
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?
AlanDiscussão (1)
Carregando comentários...