5 propiedades CSS del tag IMG de HTML que deberías conocer

Existen un montón de propiedades CSS para realizar multitud de acciones con imágenes. Por ejemplo, podemos establecerlas como fondo, o bien podemos modificar su comportamiento, como por ejemplo agregarles un borde e incluso recortarlas. Sin embargo, también hay propiedades CSS relacionadas con imágenes no tan conocidas, las cuales, al igual que las anteriores, también pueden ser utilizadas con el tag IMG de HTML.

En esta ocasión te mostraremos 5 de esas propiedades no tan conocidas. Hablaremos desde poder controlar la sombra de una imagen hasta establecer la nitidez, lo que nos ayuda a controlar mejor la apariencia y la posición de las imágenes agregadas con la etiqueta <img>. Vamos a verlas una a una.

Controlar el renderizado de una imagen

Cuando se escala una imagen, el navegador suaviza la imagen para que no se vea pixelada. Pero, dependiendo de la resolución de la imagen y la pantalla, hay veces que esto no puede venirnos del todo bien. Puedes controlar este comportamiento del navegador con la propiedad image-rendering.

Esta propiedad controla el algoritmo que se utiliza para escalar una imagen. Los dos únicos valores que acepta son crisp-edges y pixelated.

El valor crisp-edges mantiene el contraste de color entre píxeles. En otras palabras, no se suavizan las imágenes, lo que es genial para mostrar ilustraciones pixel-art.

Cuando utilizamos el valor pixelated, los píxeles cercanos de un píxel pueden recuperar su apariencia, haciendo que parezca que juntos forman un gran píxel, ideal para pantallas de alta resolución.

img {
  image-rendering: pixelated;
}

Estirar imágenes

Los valores contain, cover y fill nos suenan. Los utilizamos en la propiedad background-size para controlar cómo la imagen de fondo se acopla al elemento al que pertenece. La propiedad object-fit es bastante similar, ya que también determina cómo una imagen se ajusta dentro de su contenedor.

El valor contain ajusta la imagen a su contenedor. El valor cover hace lo mismo, pero si la relación de aspecto de la imagen y el contenedor no coincide, la imagen se recorta. Fill hace que la imagen se estire y llene su contenedor. scale-down selecciona la versión más pequeña de la imagen para mostrarla.

<div id='container'>
  <img src="image.png' alt="Imagen 1'>
</div>

#container {
  width: 300px;
  height: 300px;
}
img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

Mover imágenes

La propiedad background-position es una propiedad complementaria de la propiedad background-size. En el caso de object-fit también cuenta con su propiedad complementario, object-position.

La propiedad object-fit mueve una imagen dentro de un contenedor de imágenes a las coordenadas dadas. Las coordenadas se pueden definir como unidades de longitud absoluta, unidades de longitud relativa, palabras clave (top, left, center, bottom y right), o una combinación válida de ellas (top 20px right 5px, center right 80px).

div id='container'>
  <img src="imagen.png' alt="Imagen 1'>
</div>

#container {
  width: 300px;
  height: 300px;
}
img {
  width: 100%;
  height: 100%;
  object-position: 150px 0;
}

Situar imágenes

Muchas veces agregamos un <img> (que por defecto es inline) junto una cadena de texto para agregar información o simplemente, por estética. En este tipo de casos, alinear el texto y la imagen en la posición deseada puede ser algo poco complicado, sobre todo si no sabes qué propiedad utilizar.

La propiedad vertical-align no es exclusiva solo de las celdas de las tablas. También puede alinear un elemento inline dentro de un contenedor inline y, por lo tanto, puede utilizarse para alinear una imagen con una línea de texto. Acepta muchísimos valores, asi que tienes dónde elegir.

<p>
PDF <img width="15px" src="pdf.png"
style="vertical-align:text-top" alt="Image">
</p>

Sombrear imágenes

Cuando se usa de manera discreta en textos y contenedores, las sombras pueden darle ese toque a una página web. Lo mismo pasa con las imágenes. Las imágenes con fondo transparente pueden beneficiarse del filtro CSS drop-shadow.

Sus argumentos son similares a los valores de las propiedades CSS relacionadas con sombras (text-shadow, box-shadow). Los dos primeros representan la distancia vertical y horizontal entre las sombras y la imagen, el tercero y el cuarto son el desenfoque y el radio de propagación de la sombra, y el último es el color de la sombra.

Al igual que text-shadow o drop-shadow también crea una sombra que se moldea al objeto que pertenece. Entonces, cuando se aplica a una imagen, la sombra toma la forma de la porción visible de la imagen.

img {
  filter: drop-shadow(0 0 5px blue);
}