Hola amigos, tengo un pequeño problema y necesitaria de su ayuda;
Tengo unas imagenes de diferentes dimensiones, siempre de tamaños chicos, como por ejemplo; 50px por 80 px, 100px por 70 px, etc, siempre son imagenes pequeñas.
Lo que quiero hacer es meterlas dentro de un recudro, agrandarlas, centrarlas en este recuadro de 83px por 83px y esconder lo que sobra de la imagen.
Hasta ahora pude lograr algo de ello, pero no logro centrar las imagenes, les adjunto el codigo;
Código HTML:
<html><head>
<style type="text/css">
.thumbnails {style.css (línea 76)
background:#FFFFFF url(../images/thumbnail_bg.gif) no-repeat scroll center top;
float:left;
height:93px;
margin-bottom:6px;
margin-right:6px;
width:96px;
}
</style></head><body>
<div class="thumbnails">
<a href="http://google.com" style="margin: auto; overflow: hidden; width: 83px; height: 83px; display: block; text-align: center;">
<img style="display: block; overflow-x: visible; overflow-y: auto; text-align: center; margin-right: auto; margin-left: auto;width: 200%;height:200%" alt="La googlemania" src="http://profile.ak.facebook.com/object2/1899/65/q10772521738_5148.jpg"/>
</a>
</div>
</body>
</html>
Como veran si prueban el ejemplo notaran que la imagen no esta centrada.
Alguno tiene alguna sugerencia?
Saludos