05. El HTML que contiene nuestras imagenes
HTML:
-
<div id="imgContent">
-
<div class="scale-image"><img src="images/scaler_1.jpg" alt="" width="100%"/></div>
-
<div class="scale-image"><img src="images/scaler_2.jpg" alt="" width="100%"/></div>
-
<div class="scale-image"><img src="images/scaler_3.jpg" alt="" width="100%"/></div>
-
<div class="scale-image"><img src="images/scaler_4.jpg" alt="" width="100%"/></div>
-
<div class="scale-image"><img src="images/scaler_5.jpg" alt="" width="100%"/></div>
-
<div class="scale-image"><img src="images/scaler_6.jpg" alt="" width="100%"/></div>
-
</div>
Por último le añadimos este código a nuestra CSS solo para darle un formato más bonito...
CSS:
-
#imgContent{
-
border:1px solid #ddd;
-
overflow:auto;
-
margin:0px auto;
-
}
-
.scale-image{
-
width: 200px;
-
padding:10px;
-
float:left;
-
}
-
.scale-image img{
-
border:1px solid #EEE;
-
background-color:#FFF;
-
padding:4px;
-
}
Pueden ver un demo de esto ya terminado aquí
2 comentarios para iPhoto-like redimensionando imágenes
Muy bueno ehh!!
Felicitaciones!
Me ha gustado mucho!
Heeey!!!
gracias ^^
lo pondre a prueba ^^
Saludos!