• Diseño Web

Hacer una imagen con etiqueta img de html responsive

Hacer una imagen responsive que es asignada a un contenedor como background-image es bastante sencillo. Basta con usar las propiedades background-size, background-position y ya si queremos ser finos en nuestro trabajo también background-repeat.

Pero lo que muchos programadores junior de páginas web pueden que no sepan es que también podemos hacer que una imagen enlazada a una etiqueta <img> se comporte de forma adaptativa con las propiedades object-fit y object-position.

img {
  object-fit: cover;
  object-position: center center;
}

Como vemos object-fit hace la misma función que background-size y object-position sería análoga a background-position. Es decir, pueden recibir los mismos valores. Pero si intentamos el código anterior nos daremos cuenta de que no funciona. Es decir, no se aplica las reglas.

La razón es sencilla: HTML necesita conocer cuáles son las dimensiones de la imagen para poder aplicarlas. O de otra forma, debemos indicar el width y el height de la imagen para que pueda acoplarla según los parámetros de object-fit y object-position.

El siguiente código asignaría un contenedor de 400x300px a la imagen y la ajustaría para que ocupase toda la superficie del mismo:

img {
  height: 300px;
  widht: 400px;
  object-fit: cover;
  object-position: center center;
}

Recordad que el valor de la propiedad object-fit es cover si queremos que la imagen ocupe toda la superficie del contenedor (tened en cuenta que podemos perder parte de la imagen) o contain si queremos visualizar la imagen en el mayor tamaño que quepa en el contenedor (tened en cuenta que en este caso puede que veamos parte del fondo del contenedor). Además puede recibir los valores fill ( parecido a cover pero si la imagen no encaja en el contenedor la estirará – una imagen distorsionada en una web dice mucho de la profesionalidad del desarrollador – ), none (la imagen no se redimensiona) o scale-down (la imagen se redimensiona como si none o contain estuvieran especificados, lo que puede redundar en una imagen más pequeña del original).