Hacer que una imagen se centre y ocupe una caja con un tamaño determinado
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?