centralizar Imagem maior que o tamanho da div

23/08/2018

18

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?
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.
Responder

Mais Posts

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!
Responder

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários. Para saber mais sobre o uso de cookies,
consulte nossa política de privacidade. Ao continuar navegando em nosso site, você concorda com a nossa política.

Aceitar