The Humble img Element and Core Web Vitals(smashingmagazine.com)

  .img-responsive-cell {
    /*
      this is a div or something
      parent element to the img.
      you would size this 
      according to a grid 
      system containing 
      element for width and 
      you could sort the 
      height out with 
      %padding or something 
      else depending on what 
      you're making
    */
    position: relative;
    overflow: hidden; 
    /* 
      overflow hidden will 
      make sense in a moment 
    */
  }

  .img-responsive {
    /*
      the img element
    */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;

    \*
      or more recently you 
      can do ->

      width: 100%;
      height: 100%;
      object-fit: cover;
    *\
  }

  .img-responsive:hover {
    transform: translate(-50%,-50%) scale(1.2);
  }