[SOLUCIONADO] Mantener divs fijas y proporcionadas

[Viturbiko]

Buenas.

Estoy haciendo una web y quiero conseguir lo siguiente:



Como se puede ver, tengo 2 divs verdes, que en el futuro serían imágenes, y quiero que esten por encima de otros dos divs, que serían el morado y el rosa, pero quiero que los divs verdes se mantengan fijos en esa posicion, cosa que por ahora he conseguido. El problema es que al redimensionar la ventana, ocurre esto:



¿Qué podría hacer para que la proporción de las imágenes se mantuviese en la segunda foto parecida a la de la primera? Es decir, por debajo del texto y con media imagen sobre la capa morada y otra media sobre la capa rosa. Dejo los CSS que tengo por si sirve de ayuda:

Código:

.fotoProyectos1 {
	width: 25%;
	height: 65%;
	background-color:green;
	position: absolute;
	top:155%;
	left:0%;
	border: 1px solid black;
	padding-top: 25px;
}

.fotoProyectos2 {
	width: 25%;
	height: 65%;
	background-color:green;
	position: absolute;
	top:155%;
	left:25%;
	border: 1px solid black;
	padding-top: 25px;
}

Gracias y un saludo.

[mbm150]

Hola,

como no has puesto el html no se como lo tienes montado, pero la solucion puede ser que esas clases sean para el contenedor y dentro este la imagen con estas propiedades:

Código CSS:

.fotoProyectos1 img, .fotoProyectos2 img{
    max-height: 100%;
    max-width: 100%;
    top: 50%;
    position: relative;
    display: block;
    margin: 0 auto;
    transform: translateY(-50%);
}
 

Así el contenedor se ajusta a la forma que quieras y dentro, siempre centrado y sin deformar esta la imagen. Algo como esto: http://jsfiddle.net/mbm150/phyc8kz5/1/

Saludos.

[Viturbiko]

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.

[mbm150]

Hola,

no se me dan muy bien las explicaciones, yo aprendí haciendo bastantes pruebas. Al final lo acabas entendiendo. A veces basta con leer las definiciones para entenderlo más o menos y ya puedes hacer pruebas: http://www.w3schools.com/cssref/pr_class_position.asp

Puedes buscar en youtube algún vídeo donde te lo muestren para verlo mejor, hay bastantes tutoriales sobre CSS.

En tu caso, el position:absolute se aplica sobre el body del documento (por que es su padre), por lo que el top es respecto a la parte superior del documento.

La imagen, que esta DENTRO del .foto tiene una posicion:relative. ¿Relativa a donde? Pues a su padre.

Esto ultimo igual te ha confundido por que he usado nombres parecidos... .foto es el contenedor y img es el contenido. Pero .img1 y .img2 son dos clases diferentes a img (fíjate en el punto, si tiene punto es una clase y si no es un elemento), estas dos son una segunda clase para los contenedores que sirve para declarar su posición, nada más.

Eso quiere decir que hay un div con una posición absoluta respecto al documento que marca los limites, tanto de ancho como de alto, del contenido que tendrá dentro (la imagen). El contenido tiene una posición relativa para poder posicionarlo centrado dentro de el contenedor. Si no lo quieres centrar o vas a poner algo mas pues tendras que pensar otro método. Yo lo he hecho pensando en que dentro del div únicamente habrá una imagen y nada más.

¿Como lo centro? pues en el eje X lo centro usando margin:auto (por eso display: block, si no no funcionaria.) Y para centrarlo en el eje Y he usado translate (esto ultimo podría haberlo hecho con los dos). Esto es por que no sabes el ancho y alto que tendrá en cada momento. Si no la centras, pues la imagen estaría a la izquierda y hacia arriba (sobre todo cuando se haga pequeña). Lo de centrar se puede hacer de diferentes maneras, yo sulo hacerlo asi.

El max-width y max-height son para que nunca sobrepase a su padre. Las imágenes tienen por defecto su tamaño natural, si es menor al contenedor (recuerda que su contenedor es .foto) se centra con margin y translate. Si es mayor se hacen más pequeñas. ¿Cuanto más pequeña? Pues depende del contenedor. El tamaño máximo siempre serán los margenes del contenedor y la otra propiedad se ajusta sola (por que no esta definida, solo le hemos puesto un máximo).

Un ejemplo: Si tienes una contenedor de 300x200 y dentro una imagen cuadrada que mide 400px, la imagen se adapta y medira 200px, ajustándose al alto y . Si el contenedor es de 300x800 la imagen medirá 300, ajustándose al ancho. Y si el contenedor de de 500x500, pues la imagen media 400px.

Bueno, como ves no se me da bien explicar xD pero tranquilo que si buscas algo en youtube o google seguro que te lo explican mejor. Crea una pequeña página de pruebas y ponte a hacer todo tipo de pruebas.

Saludos.

[Viturbiko]

Muchas gracias por la explicación, me ha ayudado muchísimo. Marco el post como solucionado.

Un saludo.