Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

Surgiu a necessidade de definir imagens em posts de blog que ocupem a largura toda da tela, mesmo dentro de um elemento (container) que respeite os limites da página.

Supondo que o elemento container possua 500px de largura e a imagem dentro dele precise ter 100% da largura da tela, chegamos a esta solução:

See the Pen Full width element inside any width container by Coopers Digital Production (@coopersdigitalproduction) on CodePen.

Neste caso, a questão é definir width: 100vw; para que possua a largura da viewport, além de position: relative; left: 50%; margin-left: -50vw; para que o elemento seja posicionado corretamente na lateral da página, de acordo com as medidas da tela.

Certamente há outras abordagens possíveis (como não usar position e left, porém requer o uso de calc no margin-left, algo que pode dar problemas de compatibilidade).