Imagen ancho/alto en un div cuadrado

Tengo que ser honesto, las primeras veces que trabaje con imágenes tenía un pequeño problema con el usuario subiendo fotos en diferentes dimensiones, un requerimiento que no había previsto hasta aquel entonces ya el proyecto estaba en producción, algo tan sencillo... 😌

al principio consideré que las imágenes deben de ser subidas en una resolución con dimensiones AXA es decir cuadrada o 1X1 como prefieran llamarla, (cosa que también se las hice saber al cliente), pero no siempre el cliente seguirá al pie de la letra nuestros consejos, o quizás las primeras veces y conforme pase el tiempo, se olvidara de ello simplemente pese a tener el manual (tristemente, nadie lee el manual)...

Para poder entender mejor el ejemplo, colocaré cuatro, dos imágenes con dimensiones diferentes, la primera un banner horizontal, la segunda un banner alargado (no hace falta tener que explicarles puesto que lo pueden apreciar en la parte inferior, dentro del iframe 😇) y sus respectivas soluciones.

esta imagen tiene que estar contenida dentro de un elemento cuadrado div es decir un elemento de 1X1 o como prefieran denominarlo, ahora el siguiente punto es que cuando las imágenes tienen dimensiones diferente al ser contenidas dentro de un elemento cuadrado tenemos que ajustarlo al ancho o alto dependiendo del caso. si bien lo tenemos en un card es decir imagen mas descripción, la dimensión puede alterar un poquito nuestro diseño 😔, por ende debemos de colocarlo dentro de un elemento div y adicionar la propiedad cover conjuntamente con el script mostrado en el codepen), centrar lo y ajustar al tamaño del div de dimensiones cuadradas, dando como resultado los dos elementos finales del ejemplo de abajo.

**Definitivamente creo que no me deje entender del todo, pero dejemos que el script lo explique por mi, espero que este script le sirva de ayuda para sus proyectos y/o trabajos... 😋

Si te ayudo, sirvió o gusto compártelo y recuérdate agradecer 😊