Olá, tudo bem?
Gostaria de saber faço dentro de uma seção, um conjunto de fotos uma do lado da outra com tamanhos diferentes, sendo que podem passar uma por baixo da outra e se redimensionam automáticas com o tamanho da página. Também gostaria de saber como deixo uma mais perto ou longe do topo da seção.
Como meu código está renderizando: http://prntscr.com/jyrp9q
Como eu queria que renderizasse: http://prntscr.com/jyrw0q
Oi Maximiliano, tudo bem? Vamos lá, você vai precisar mesclar conhecimentos de várias coisas.
Primeiro, para que as imagens se sobreponham uma sobre as coisas é relativo as propriedades de posicionamento, lembra do position absolute? Ele vai entrar ai.
Para redimensionamento automático, bom, ai tem um truque, primeiro você define que o width de todas as imagens sejam 100%. Lembra que porcentagem é sempre baseado em alguma referência? Neste caso, você envolve cada imagem com um div (por exemplo) e define o tamanho do div de forma que quiser, neste caso, a imagem se adequará ao tamanho do div.
Se o tamanho do div mudar, o tamanho da imagem acompanha. Pro tamanho do div mudar sozinho, você aplica técnicas de design responsivo (tem curso de design responsivo aqui na Alura). Isso se resume a definir o tamanho das divs com porcentagens também.
Pra deixar mais longe do topo da sessão você pode usar o velho e bom margin.
Deu pra entender mais ou menos o caminho?