centralizar Imagem maior que o tamanho da div
23/08/2018
0
E aí, pessoal, beleza?
Já vou adiantando, sou novo no ramo e acabei de aprender a organização de um layout web com flexbox. Estou desenvolvendo um projeto de um amigo com base em um template mas tenho uma dúvida: Na primeira página a imagem do banner é maior que as demais, ultrapassando os limites da div. A intenção é essa mesmo, mas eu quero centralizá-la horizontalmente no layout de forma a conservar os demais conteúdos.
A estrutura está assim: Container flex row com três div para centralizar o conteúdo; na div central um flex column com quatro divs sendo topo, banner, principal e rodapé. A imagem da primeira página, centralizada, invadiria uma porção das divs laterais. Nas demais páginas o banner ficará dentro do limite da div.
Não encontrei onde anexar imagem no post, então espero que esta descrição ajude a visualizar a minha dúvida. Alguém me dá uma força?
Já vou adiantando, sou novo no ramo e acabei de aprender a organização de um layout web com flexbox. Estou desenvolvendo um projeto de um amigo com base em um template mas tenho uma dúvida: Na primeira página a imagem do banner é maior que as demais, ultrapassando os limites da div. A intenção é essa mesmo, mas eu quero centralizá-la horizontalmente no layout de forma a conservar os demais conteúdos.
A estrutura está assim: Container flex row com três div para centralizar o conteúdo; na div central um flex column com quatro divs sendo topo, banner, principal e rodapé. A imagem da primeira página, centralizada, invadiria uma porção das divs laterais. Nas demais páginas o banner ficará dentro do limite da div.
Não encontrei onde anexar imagem no post, então espero que esta descrição ajude a visualizar a minha dúvida. Alguém me dá uma força?
Hernani Informatica
Curtir tópico
+ 0
Responder
Post mais votado
24/08/2018
Oi Hernani,
Uma dica é setar a propriedade de altura da sua imagem em 100%, nesse caso, ela ocupará toda a altura da div na qual ela está dentro, redimensionando corretamente.
Uma dica é setar a propriedade de altura da sua imagem em 100%, nesse caso, ela ocupará toda a altura da div na qual ela está dentro, redimensionando corretamente.
Fernando Duwe
Responder
Mais Posts
24/08/2018
Hernani Informatica
Bom dia Duwe. Valeu pela dica!
Ontem a noite eu estava fuçando as propriedades, pois quando eu insiro a imagem, por ele ser maior do que a largura da div central, ele joga o excesso para a direita. Daí eu descobri que posso setar a margem esquerda para um valor negativo - para mim que mexo mais com papel é como mandar a impressora puxar o carro para o meio do monitor antes de imprimir, kkk. Como eu já tenho as medidas do layout eu joguei a margem para o início horizontal da página e a imagem ficou no lugar. Eu não sei se está certo mas eu testo os ajustes da página alterando o zoom do navegador.
É isso aí. Eu ainda estou bem cru nesta empreitada - nem cheguei no javascript ainda! - então sei que tenho muito o que aprender, fuçar e perguntar.
Muito grato pelo apoio!
Ontem a noite eu estava fuçando as propriedades, pois quando eu insiro a imagem, por ele ser maior do que a largura da div central, ele joga o excesso para a direita. Daí eu descobri que posso setar a margem esquerda para um valor negativo - para mim que mexo mais com papel é como mandar a impressora puxar o carro para o meio do monitor antes de imprimir, kkk. Como eu já tenho as medidas do layout eu joguei a margem para o início horizontal da página e a imagem ficou no lugar. Eu não sei se está certo mas eu testo os ajustes da página alterando o zoom do navegador.
É isso aí. Eu ainda estou bem cru nesta empreitada - nem cheguei no javascript ainda! - então sei que tenho muito o que aprender, fuçar e perguntar.
Muito grato pelo apoio!
Responder
Clique aqui para fazer login e interagir na Comunidade :)
