How do I stop an image from stretching the grid row?

Question

I have a grid of images, most of them are the same size. However, one of them is about 2x as long as the others. When positioned on the grid, the longer image causes the row that it's on to stretch out, and show the whole image. I want to limit the height of the image so that all the images are a consistent size and look uniform on the grid. The bottom half of the longer image can be cut off.

I have tried all sorts of css properties on the image itself, including height, max-height, object-fit, etc and none of them seem to help.

Here is my code:

HTML

<div class="portfolio">
  <!-- Portfolio Item 01 -->
  <a href="easybank.html" class="portfolio__item">
    <img
      src="img/easybank.png"
      class="portfolio__img"
      alt="easybank portfolio image"
    />
    <!-- this is the longer image -->
  </a>

  <!-- Portfolio Item 02 -->
  <a href="portfolio-item.html" class="portfolio__item">
    <img
      src="img/portfolio-02.jpg"
      class="portfolio__img"
      alt="portfolio image"
    />
  </a>

  <!-- Portfolio Item 03 -->
  <a href="portfolio-item.html" class="portfolio__item">
    <img
      src="img/portfolio-03.jpg"
      class="portfolio__img"
      alt="portfolio image"
    />
  </a>

  <!-- Portfolio Item 04 -->
  <a href="portfolio-item.html" class="portfolio__item">
    <img
      src="img/portfolio-04.jpg"
      class="portfolio__img"
      alt="portfolio image"
    />
  </a>

  <!-- Portfolio Item 05 -->
  <a href="portfolio-item.html" class="portfolio__item">
    <img
      src="img/portfolio-05.jpg"
      class="portfolio__img"
      alt="portfolio image"
    />
  </a>
</div>

CSS:

img {
  display: block;
  max-width: 100%;
}

.portfolio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.portfolio__item {
    background: var(--clr-accent);
    overflow: hidden;
}

.portfolio__img {
    transition: 
        transform 750ms cubic-bezier(.5, 0, .5, 1),
        opacity 250ms linear;
}

.portfolio__item:focus {
    position: relative;
    z-index: 2;
}

.portfolio__img:hover,
.portfolio__item:focus .portfolio__img {
    transform: scale(1.2);
    opacity: .5;
}

Answer 1

If you wish to have a specific height on all of your images, you need to use a combination of height and object-fit, like this:

img {
  display: block;
  height: 200px;
  width: 100%;
  object-fit: cover;
}

See working snippet here:

img {
  display: block;
  height: 200px;
  object-fit: cover;
  width: 100%;
}

.portfolio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.portfolio__item {
    background: var(--clr-accent);
    overflow: hidden;
}

.portfolio__img {
    transition: 
        transform 750ms cubic-bezier(.5, 0, .5, 1),
        opacity 250ms linear;
}

.portfolio__item:focus {
    position: relative;
    z-index: 2;
}

.portfolio__img:hover,
.portfolio__item:focus .portfolio__img {
    transform: scale(1.2);
    opacity: .5;
}

<div class="portfolio">
  <!-- Portfolio Item 01 -->
  <a href="easybank.html" class="portfolio__item">
    <img
      src="https://images.unsplash.com/photo-1569389397653-c04fe624e663?ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80"
      class="portfolio__img"
      alt="easybank portfolio image"
    />
    <!-- this is the longer image -->
  </a>

  <!-- Portfolio Item 02 -->
  <a href="portfolio-item.html" class="portfolio__item">
    <img
      src="https://images.unsplash.com/photo-1581291518857-4e27b48ff24e?ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80"
      class="portfolio__img"
      alt="portfolio image"
    />
  </a>

  <!-- Portfolio Item 03 -->
  <a href="portfolio-item.html" class="portfolio__item">
    <img
      src="https://images.unsplash.com/photo-1581291518857-4e27b48ff24e?ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80"
      class="portfolio__img"
      alt="portfolio image"
    />
  </a>

  <!-- Portfolio Item 04 -->
  <a href="portfolio-item.html" class="portfolio__item">
    <img
      src="https://images.unsplash.com/photo-1581291518857-4e27b48ff24e?ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80"
      class="portfolio__img"
      alt="portfolio image"
    />
  </a>

  <!-- Portfolio Item 05 -->
  <a href="portfolio-item.html" class="portfolio__item">
    <img
      src="https://images.unsplash.com/photo-1581291518857-4e27b48ff24e?ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80"
      class="portfolio__img"
      alt="portfolio image"
    />
  </a>
</div>