CSS: Imágenes

Las imágenes son una parte esencial del contenido que se publica en las páginas web. Por ello es importante conocer las propiedades CSS que podemos usar para modificar o adaptar tanto su diseño como su presentación.

El tamaño de las imágenes

Con las propiedades width y height tratadas en el artículo de las dimensiones se puede modificar la altura y la anchura de una imagen. Sin embargo, hay que usarlas con cuidado con el fin de no perder la proporción de la imagen. Por ejemplo, si a una imagen de 400×300 píxeles le indicamos una altura de 200 píxeles y una anchura de 300 píxeles se verá distorsionada verticalmente.

Por esta razón es recomendable que una de las dos propiedades esté configurada con el valor auto. Con este método se puede garantizar que la imagen no saldrá deformada ni por la anchura ni por la altura.

Ejemplo de código CSS:

img {
  height: 200px;
  width: auto;
}

No obstante, especificar la anchura y la altura de las imágenes en CSS puede resultar engorroso si pretendemos hacerlo en todas las imágenes del contenido: tendríamos tantas reglas CSS como imágenes se publiquen en la web.

Para ser prácticos, su uso debería estar restringido a elementos de diseño, como un icono, un logo o un símbolo que forme parte de la estética. Es por esta razón que para las imágenes del contenido de una web lo más recomendado es el uso de los atributos width y height dentro de la etiqueta HTML <img>.

Ejemplo de código HTML:

<img src="/logo/logo.svg" width="200" height="34">

Tamaño adaptable

Otra práctica interesante para las imágenes del contenido, en caso de que queramos que ocupen el ancho completo y queramos que se adapten a cualquier ancho (diseño web responsive), es usando un ancho máximo del 100% y un alto automático, para preservar la proporción. Esto se puede hacer con las propiedades y los valores siguientes: width: 100% y max-width: 100%.

Código CSS:

img {
  height: auto;
  width: 100%;
}

De este modo, será el navegador web el que calculará de forma automática la altura, dependiendo de la anchura de la imagen, que estará definida por el tamaño de su elemento contenedor (padre). Esto significa que con los diferentes tamaños de anchura de la imagen se ajustará la altura manteniendo la proporción.

Si se usa la propiedad width: 100%, la imagen se ajustará al ancho completo incluso cuando supere su anchura en píxeles, lo que podría provocar que se vea borrosa. En cambio, con max-width: 100% la imagen no superará su tamaño original en dispositivos grandes, pero sí que se reducirá en dispositivos más pequeños. Nunca se verá ampliada y borrosa.

Para conseguir que una imagen tenga un tamaño adaptable tanto horizontal como verticalmente, reduciéndose en dispositivos más pequeños pero sin ampliarse en dispositivos más grandes, será tan fácil como indicar un ancho y un alto automáticos junto con una anchura máxima y una altura máxima del 100%.

Código CSS:

img {
  height: auto;
  width: auto;
  max-height: 100%;
  max-width: 100%;
}

Bordes estilizados

Otras propiedades que se pueden modificar en las imágenes y que ayudarán a crear diseños más creativos son los bordes y el relleno. Por ejemplo, se puede añadir un relleno de 5 píxeles, un borde de 1 píxel y las esquinas se pueden redondear. También se puede añadir un bonito sombreado por debajo.

Código CSS:

.estilizada {
  background: antiquewhite;
  border-radius: 6px;
  border: 1px solid #aaa;
  box-shadow: 3px 3px 6px 0 #00000044;
  padding: 5px;
}

Resultado:

Imágenes redondeadas

Con la propiedad de CSS border-radius también se puede crear imágenes de forma circular o elíptica. Con el valor de redondeo del 50%, si la imagen es cuadrada el resultado será un círculo, y si es rectangular el resultado será una elipse.

Este redondeo se aplica a las esquinas de la caja de la imagen. Si aplicamos un redondeo del 50% a la imagen del ejemplo anterior, obtendremos una elipse, ya que sus dimensiones reales son 300×200 píxeles.

Código CSS:

.redondeada {
  border-radius: 50%;
}

Resultado:

Centrado de imagen

Para centrar una imagen es necesario utilizar varias propiedades CSS. Primero es importante convertir la visualización del elemento de imagen a bloque; esto se consigue con la propiedad dislay y el valor block. Después hay que aplicar el valor auto a los márgenes laterales. Veamos un ejemplo.

Código CSS para centrar una imagen:

.centrada {
  display: block;
  margin: 0 auto;
  max-width: 50%;
}

Resultado:

A esta imagen centrada se le ha dado una anchura máxima del 50%, con lo cual el 50% restante quedará repartido entre los márgenes laterales. El valor 0 auto de la propiedad abreviada para los márgenes indica que los márgenes superior e inferior serán de 0 píxeles, pero será automático a ambos lados.

Imagen transparente

Con CSS también es posible dar transparencia a una imagen. Este efecto visual se consigue con la propiedad CSS opacity. Con esta propiedad se indica un nivel de transparencia que será un valor decimal en tanto por uno. Vamos a ver un ejemplo aplicando una opacidad del 25% a la imagen anterior.

Código CSS:

.transparente {
  opacity: 0.25
}

Resultado:

La propiedad ‘image-orientation’

Las imágenes contienen información adicional llamada «metadatos» (EXIF) que acompaña al propio archivo. Estos datos contienen detalles como la fecha de creación, ubicación geográfica, orientación, resolución, la cámara usada o detalles del autor. Con la propiedad CSS image-orientation se puede modificar la orientación de la imagen respecto a esta información.

Valores de la propiedad image-orientation:

La propiedad ‘image-rendering’

Cuando una imagen está escalada respecto a su tamaño original, es posible que se vea de menor calidad o con ciertas imperfecciones. Esto puede suceder tanto si se agranda como si se encoge la imagen. Con la propiedad image-rendering se le indica al navegador un algoritmo de escalado específico.

Valores de la propiedad image-rendering: