CSS: miniaturas de imágenes en gestores de contenido

En algunos gestores de contenido existen módulos para gestión de galerías de imagen en los que no hay más que subir las imágenes, dar título y descripción y el gestor se encarga del resto, incluyendo el redimensionado de la imagen.

Pero a veces ese redimensionado no es el adecuado. Supongamos que solo se redimensiona por anchura , guuardando la proporcion de la imagen original, y que lo que queremos es, por ejemplo, una imagen con forma de cuadrado de 110×110 px.

En este caso concreto el gestor redimensiona la imagen, pero no la recorta, por lo que o le damos una imagen cuadrada o la miniatura no ocupará todo su espacio.

Hay dos soluciones. La primera y más rápida darle a la imagen las dimensiones por CSS, pero quedará deformada o incluso pixelada.

Y la segunda solución, más adecuada, utilizar la propiedad CSS overflow: hidden; en el contenedor de la imagen y que dicha imagen tenga siempre unas dimensiones superiores a 110px, tanto en altura como en anchura (sin pasarse mucho).

Supongamos que tenemos este código HTML (para dos miniaturas):

<div>
 <div class="e;thumb"e;>
  <a href="#"><img src="imagen1.jpg" /></a>
 </div>
 <div class="e;thumb"e;>
  <a href="#"><img src="imagen1.jpg" /></a>
 </div>
</div>

Se utilizaría el siguiente CSS:

div.thumb {width:110px;height:110px;}
div.thumb a {width:110px;height:110px;display:block;position:relative;overflow:hidden;}
div.thumb a img {display:block;position:absolute;top:0;left:0;}

Atención a las propiedades position: son para que esto funcione en Internet Explorer (versiones 6 y 7).