estilovirtual 0 Denunciar post Postado Novembro 9, 2017 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
The Lars 0 Denunciar post Postado Novembro 10, 2017 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
