Una de las cosas que más frustran es cuando tienes que hacer que una imagen ocupe un espacio determinado y esta es mas grande o más pequeña… sobre todo cuando hablamos de archivos y páginas dinámicos, donde se lee la imagen desde una base de datos y que ha podido subir un usuario como en un CMS donde tenemos menos control.

Afortunadamente CSS viene en nuestra ayuda y con tan solo una clase y unas cuantas propiedades podemos controlar esto y hacer que la imagen ocupe y se centre en nuestro espacio casi como si fuera un background.

Vamos a ello…

Lo primero es es que nuestra imagen debe de tener una clase, en nuestra caso lo llamaros imagen_layout de la siguiente forma:

<img src="enlace_de_la_imgen" class="imagen_layout">

Naturalmente esta imagen estará dentro de la estructura html que corresponda, pero la magia viene en el css, ya que con poner solo esto:

.imagen_layout{
    width: 100%;
    object-fit: cover;
    object-position: center center;
    height:300px
}

Tendremos una imagen centrada en su centro, que ocupara el 100% de la caja con una altura de 300px y que tendra todo el overflow hidden.

Maravilloso, ¿verdad?