CSS IMAGENES: Nociones básicas

Estilos básicos

Establecer la anchura y altura de las imágenes

Utilizando las propiedades width y height, es posible mostrar las imágenes con cualquier altura/anchura, independientemente de su altura/anchura real:

#destacada {
width: 25px;
height: 250px;
margin: 10px auto;
display:block;
}

<img id="destacada" src="imagen.png" />

Ejemplo:

Imagen original:

Imagen formateada con CSS:

El ejemplo anterior muestra el efecto sobre la imagen original (con data-original-height="312" data-original-width="409"), cuando el diseñador aplica un estilo (en este caso el estilo llamado "destacada") según sus necesidades, como por ejemplo dar una forma perfecta de cuadrado, para poder modificar la imagen con un círculo.

No obstante, si se utilizan alturas/anchuras diferentes de las reales, el navegador deforma las imágenes y el resultado estético es muy desagradable.

Por otra parte, establecer la altura/anchura de todas las imágenes mediante CSS es una práctica poco recomendable. El motivo es que normalmente dos imágenes diferentes no comparten la misma altura/anchura. Por lo tanto, se debe crear una nueva regla CSS (y un nuevo selector) para cada una de las diferentes imágenes del sitio web.

En la práctica, esta forma de trabajo produce una sobrecarga de estilos que la hace inviable. Por este motivo, aunque es una solución que no respeta la separación completa entre contenidos (XHTML) y presentación (CSS), se recomienda establecer la altura/anchura de las imágenes mediante los atributos width y height de la etiqueta <img>:

<img src="imagen.png" width="120" height="250" />

Eliminar el borde de las imágenes con enlaces

Cuando una imagen forma parte de un enlace, los navegadores muestran por defecto un borde azul grueso alrededor de las imágenes. Por tanto, una de las reglas más utilizadas en los archivos CSS es la que elimina los bordes de las imágenes con enlaces:

Ejercicio

Definir las reglas CSS que permiten mostrar una galería de imágenes similar a la que se muestra en la siguiente imagen:

Figura: Galería de imágenes construida con CSS

Solución

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio galería de imágenes</title>
<style type="text/css">
#galeria {
  /* En el navegador Internet Explorer versión 6 y anteriores no funciona
  la propiedad "max-width" */
  max-width: 650px;
}
#galeria img {
  float: left;
  margin: 1em;
  padding: .5em;
  border: 1px solid #CCC;
}
</style>
</head>

<body>
<div id="galeria">
<img src="../comun/imagenes/imagen.png" alt="Imagen generica" />
<img src="../comun/imagenes/imagen.png" alt="Imagen generica" />
<img src="../comun/imagenes/imagen.png" alt="Imagen generica" />
<img src="../comun/imagenes/imagen.png" alt="Imagen generica" />
<img src="../comun/imagenes/imagen.png" alt="Imagen generica" />
<img src="../comun/imagenes/imagen.png" alt="Imagen generica" />
<img src="../comun/imagenes/imagen.png" alt="Imagen generica" />
<img src="../comun/imagenes/imagen.png" alt="Imagen generica" />
<img src="../comun/imagenes/imagen.png" alt="Imagen generica" />
</div>
</body>
</html>