1

sou completamente iniciante em HTML, e estou tentando usar uma imagem no alto do site como uma espécie de cabeçalho (quero que ela ocupe toda a extensão da tela).

Segue meu código:

#topo {
  width: 100%;
}

#foto-principal {
  width: 100%;
  height: 500px;
  margin-left: 0px;
}
<figure id="topo">
  <img id="foto-principal" src="https://picsum.photos/600/500" />
</figure>

<figure style="text-align: center; margin-top: 100px; padding: 60px">
  <img src="https://picsum.photos/250/250" width="250px" height="250px" align="left" />
  <img src="https://picsum.photos/250/250" width="250px" height="250px" align="center" />
  <img src="https://picsum.photos/250/250" width="250px" height="250px" align="right" />
</figure>

A tag figure funciona como um contêiner, certo? Eu mando ele ocupar 100% da tela e a imagem ocupar 100% do contêiner, faz sentido? A imagem parece ter uma margem maior a esquerda, e eu ainda preciso rolar a barra inferior pra direita para ver toda a figura, ou seja, ela não está idealmente alinhada a tela. Como proceder? (Segue uma imagem também).

Mais abaixo eu tenho uma sequência de 3 fotos e esta foi a maneira básica que encontrei de organiza-las em sequência, mudando o padding do contêiner para elas ficarem um pouco mais próximas. Existe uma forma mais eficiente?

Segue imagem (cabeçalho e sequência de figuras):

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

1

1 Resposta 1

2

Tem um outro detalhe que esqueceu, o html e body possuem padding e margin, zere-os antes de começar.

body,html{
   padding: 0;
   margin: 0;
}

Podes também usar as propriedades de viewport, como vw e vh, essas propriedades ignoram o tamanho dos conteúdos pais. Mas o 100% ja vai funcionar nesse caso. Caso queira esconder o scroll lateral podes usar o overflow-y: hidden;

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .