De nada,
Montes28.
Y no es que "apenas estás aprendiendo". Es que no sabes. Y punto.
Hay cosas con las que puedes experimentar, pero otras ya las tienes que traer sabidas. Son CSS básico, por no hablar del sentido común.
¿Ahora resulta que los div's llevaban imágenes? ¿Y no se te ocurrió pensar que un div y su contenido de texto sí se puede ajustar, pero para una imagen es imposible?. O no, pero en la mayoría de los casos se te va a deformar.
Por supuesto que si esa imagen no tiene diseño, sino que es solamente un "color"; que se deforme no tiene la menor importancia. Pero no estás explicando qué clase de imagen es, y para mostrar colores, se usa el ejemplo que puse arriba.
Entonces hay que elegir si las fotos se van a ajustar solamente en ancho, o solamente en alto, y donde sobre se corta, y donde falte que se vea el fondo.
Y si elegimos, por ejemplo el ancho, se le da el 100% al width.
Claro que si no te importa que se estiren, le das también su 100% al height. Pero para eso ni hacen falta los div's : con poner 2 imágenes arriba y 2 abajo alcanza. Y todo lo que se explicó antes estuvo de más.
También está la posibilidad de meter las imágenes como fondo de cada div, pero eso lo sabrías si hubieses leído algún manual de CSS. La ventaja estaría en que si una imagen no carga, seguro no aparecen "saltos" de diseño porque no tienen alto o ancho..
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>4 IMÁGENES.</title>
<style type="text/css">
body, html { height:100%;
margin:0;
padding:0;
width:100%;
background-color:silver;
}
#grande{ width:100%;
height:100%;
margin:0;
text-align:center;
}
#uno{ width:50%;
display:inline-block;
margin:auto;
height:50%;
background-color:blue;
overflow:hidden;
}
#dos{ width:50%;
display:inline-block;
height:50%;
background-color:green;
overflow:hidden;
}
#tres{ width:50%;
display:inline-block;
height:50%;
background-color:yellow;
overflow:hidden;
}
#cuatro{ width:50%;
display:inline-block;
height:50%;
background-color:red;
overflow:hidden;
}
img{ width:100%;
/*height:100%;*/
}
</style>
</head>
<body>
<div id="grande">
<div id="uno"><img
src="http://img62.imageshack.us/img62/5510/lorenzoamengual.jpg"></div><div
id="dos"><img
src="http://img96.imageshack.us/img96/5585/briancorin1.jpg"></div><br>
<div id="tres"><img
src="http://img838.imageshack.us/img838/7460/alfredobenavidezbedoya2.jpg"></div><div
id="cuatro"><img
src="http://img62.imageshack.us/img62/7433/romulomaccio.jpg"></div>
</div>
</body>
</html>
Vamos a ver qué inventas ahora ...