Hacer una imagen con etiqueta img de html responsive



Publicado el 25 - Abr - 2023

Imagen Responsive, object-fit | 0 comentarios    |  1254 Visitas


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.


CSS
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:


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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.