Centrar imagen con overflow hidden dentro de un link

eugenioclrc · #1 (**permalink**) 06/01/2009, 06:58

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

Mikmoro · #2 (**permalink**) 06/01/2009, 16:38

¿Centrar vertical u horizontalmente?

eugenioclrc · #3 (**permalink**) 06/01/2009, 17:45

Hola, quiero centrar de ambas formas, vertical y horizontalmente, actualmente la imagen se ve de esta forma;

Donde X es la imagen que se ve y * esta escondido por la propiedad overflow:hidden;

XXXX****
XXXX****
XXXX****
********
********

Y yo quiero que la imagen quede asi;

********
**XXXX**
**XXXX**
**XXXX**
********

Saludos