Imagem no meio de uma DIV
Publicado em: 2006-12-12 — 14.092 visualizacoes
Dois são os métodos de inserção de uma imagem dentro de uma DIV
- Incluir a imagem no código de marcação usando o elemento IMG;
- Declarar a imagem nas CSS;
A escolha de um outro método é uma decisão do desenvolvedor em função das particularidades de cada caso.
Vamos supor uma DIV com as dimensões de 400 x 200px e uma imagem com dimensões iguais a 310 x 150px.
Método da imagem no código
Quando você inclui uma imagem dentro de uma DIV usando a tag IMG a imagem será renderizada dentro da DIV “colada” no canto superior esquerdo. Então, use uma regra CSS para “puxar” a imagem para o centro da DIV declarando:
img {
position:relative;
left:50%;
top:50%;
}
A regra CSS acima mostrada posiciona o canto superior direito da imagem no centro da DIV. Contudo queremos que o centro da imagem coincida com o centro da DIV. Para obter este posicionamento precisamos “puxar” a imagem para a esquerda e para cima, de um valor igual a metade da largura e da altura da imagem, ou seja (155px para a esquerda e 75px para cima — metade de 310px e 150px respectivamente). Conseguimos isto declarando:
img {
margin-left:-155px;
margin-top:-75px;
}
O esquema mostrado na figura abaixo esclarece o posicionamento
Método da imagem nas CSS
Ao optar por este método basta declarar a posição center na declaração de background.
Quando se declara apenas uma das duas posições para uma imagem de background, a posição omitida e automaticamente assumida como center.
img div {
background:#fff url(imagem.jpg) no-repeat center;
}
Para maiores detalhes sobre este método consulte: A propriedade background.
Consulte uma página Web mostrando na prática os dois métodos. Abra o código fonte da página, para ver a aplicação das regras explicadas.
Retweet this post----------------x-x-x--------------- fim da matéria ---------------x-x-x---------------
Livros do Maujor
Esta matéria foi publicada em: 2006-12-12 (terça-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2006/12/12/imagem-no-meio-de-ume-div/trackback no seu site.
Exatamente!
Como foi dito, depende da necessidade do caso.
Caso seja somente para estilização visual, o caso da imagem no CSS é o que vale mais a pena.
Agora, se a parte fizer parte do conteúdo, utilizo-a diretamente no HTML.
Parabéns pelo artigo.
Iniciei a trabalhar com CSS há alguns meses.
Utilizo imagens pelo HTML (img) quando construo páginas dinâmicas (PHP), devido não ser possível incluí-las via CSS.
Sonho com o dia em que será possível incluir código PHP dentro do CSS.
Seria o auge do CSS!!!
Parabens!!!
Diego, este dia pode estar longe, mas existem outras soluções para isso.
Por exemplo como fiz recentemente, ao invés de chamar o arquivo “.CSS” passei a chamar o arquivo “.PHP” e passando um parâmetro pela URL consigo imprimir o CSS na tela.
Funcionou muito bem e pude parar de inserir imagens na mão dentro do HTML.
Muito bom
Oi, sou leiga no assunto… sei um pouco de html, to levando um baile do css. Mas to aprendendo aos pouquinhos. Queria um help. To com dificuldade de achar solução pra um problema no meu blog. Coisa ridícula, mas que me incomoda. Dá uma olhada no meu blog, vai lá em cima (onde se maximiza, minimiza) e restaura… Dá uma olhada na imagem. Ela não é do mesmo tamanho que o background. Não sei como fazer pra que ela acompanhe o resto do blog. Me ajuda, porfavor. Talvez seja só um detalhe que eu não to sabendo arrumar.
Desde já te agradeço.
Abraço
Amanda
Maujor,
no exemplo do método da imagem nas css, não seria o background da div? ao inves da img?
desculpa. se estiver enganado exclua este comentário.
Abraço
Roberto Trevisan
@Trevisan,
Sim! houve um engano ali.
A coreção foi feita.
Grato
Muito obrigado, pela informação.De grande valia.-Saúde e paz para ti.
Obrigado Alfredo Holffman!
Jamais havia pensado dessa maneira! Gostei muito da idéia!
Nossa isso me ajudou muito em um site q estou fazendo !!!
Pessoal, uma coisa que me persegue é o seguinte:
tenho 10 imgens, farei um laço em php para exibi-las. porem algumas das imagens são mais altas do que largas, e outras vice-versa. Como fazer o metodo da imagem no código? Pergunto isso pois, terei de criar um link com esta imagem para por exemplo abrir a imagem grande. e agora? Vertical alingment, não encontrei um tutorial que me explicasse a lógica, e eplo visto para imagens tb, precisa saber o tamanho XxY da imagem.
Olá
Eu tenho uma folha de estilos onde coloco uma figura como se fosse marca d’agua, eu quero colocar junto agora mais uma figura, no topo das páginas que acessarão estes estilos, mas não consigo fazer isto, sou iniciante e estou apanhando.
Obrigado
Olá
Sou novo no CSS e gostaria que me ensinassem como construir uma Div. É que eu estou construindo um site e preciso de uma área com duas fotos uma do lado da outra e sobre elas peciso colocar texto. Estou inserindo tudo cm imagem mas não consigo colocar o texto sobre as imagens. Desculpe-me a “inocência” no assunto.
Obrigado
Pegue seu arquivo CSS e salve-o como PHP e ao invés de fazer a referência do CSS faça um include do PHP em sua página e poderás manipular toda a estrutura css dinamicamente dentro de seu script. Isso funcionará para qualquer linguagem de programação.