Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Desarrollo web que contiene a CSS que contiene a CSS: miniaturas de imágenes en gestores de contenido

Datos de búsqueda

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).

Compartir este artículo:

  • Compartir en del.icio.us
  • Compartir en Technorati
  • Añadir a Google Bookmarks
  • Compartir en Google Buzz

Datos del artículo:

Comentarios del artículo

Los comentarios están cerrados.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Todavía no hay comentarios.

Los comentarios están cerrados.

Información del sitio