
A idéia é foco dentro de um DIV, uma imagem com posicionamento absoluto { posição: absoluto; }. Para fazer isso, primeiro de tudo é atribuir, para o div que conterá a imagem, um posicionamento relativo, evitando que o posicionamento absoluto da imagem é para o recipiente de pai do elemento que tem o posicionamento relativo na próxima, ou se não conseguir, para o corpo.
Supondo que temos o código a seguir com uma div e imagem dentro do mesmo:
1 2 3 | <div class="contenedor"> <img class="imagen" src="" /> </div> |
O estilo aplicado ao recipiente e a imagem é a seguinte:
1 2 3 4 5 6 7 8 9 10 11 | .contenedor { position: relative; } .imagen { position:absolute; left:0px; right:0px; top:0px; margin:auto; } |
Para ver o resultado com alguns dos exemplo de, Nós vamos modificar o código HTML, atribuindo um borda e um tamanho o div, assim como a adição de um rota e um tamanho para a imagem. Ficaria algo assim:
1 2 3 4 5 | <div class="contenedor" style="border:1px solid orange;width:100%;max-width:500px;height:400px;"> <img class="imagen" src="https://professor-falken.com/wp-content/uploads/2016/04/10-fondos-de-pantalla-para-que-uses-en-WhatsApp-Telegram-o-tu-aplicacion-de-mensajeria-favorita-Image-5-professor-falken.com_.jpg" style="width:200px;" /> </div> |
e, em seguida, o resultado:


Deixe-em um comentário ou entrar para oFórum