Muchas gracias, el enlace que me has pasado con Hank Scorpio es justo lo que quería, pero te agradecería que me explicases un par de cosas si no es molestia:
- Me he dado cuenta que si no pongo uno de los dos divs (morado o rosa) con position:relative el efecto responsive falla y el personaje se descuadra, y me gustaría saber por qué.
- Sobre los demas CSS:
Código:
.foto {
position: absolute;
width: 20%;
height: 50%;
top: 25%;
}
Entiendo que con esto estas diciendo que cada foto tenga una posicion absoluta, de un ancho del 20% y un alto del 50%, que este a una distancia del 25% de la parte superior... ¿pero de la parte superior del div que lo contiene o del div anterior? Nunca me acabo de aclarar con los posicionamientos.
Código:
.foto img {
max-height: 100%;
max-width: 100%;
top: 50%;
position: relative;
display: block;
margin: 0 auto;
transform: translateY(-50%);
}
Aqui estamos diciendo que cada imagen este, en este caso, en posicion relativa, pero sigo sin entenderlo muy bien. ¿Es absoluta y ahora a la vez relativa? No acabo de comprender que efectos tienen los posicionamientos combinados de este caso.
Además, ¿Qué utilidad tienen exactamente max-height y max width? ¿Es obligatorio el translateY? ¿Si esta puesto como display block, no se supone que cada imagen deberia ocupar una "fila" entera de la pantalla y no dejar hueco a la de al lado?
Perdona que te pregunte como si fueses mi profesor, pero copiar sin entender no es aprender, que es lo que yo quiero al fin y al cabo.
Muchísimas gracias de nuevo.