Соотношение сторон изображения искажено при создании 100% высоты / ширины контейнера

Question

У меня такой стиль:

.album-photos-container {
  position: relative;
  display: flex;
  flex-flow: wrap;
  justify-content: center;

  .image-card-small {
    width: 48%;
    margin: 4px;
    filter: brightness(0.8);
    img {
      width: 100%;
      height: 100%;
      max-height: 400px;
    }
  }
}

Вот как это выглядит при искажении изображений.

I read about the display: flex; and flex-flow: wrap; and it looks this is what they do and I need some other approach maybe.

I try to set the max-height: 400px; to a higher value like 2000 then it looks like this:

Please advise: I want images to fill the box no matter how wide or tall the image is!

UPDATE

Here is the component

import React from 'react'

const ClickablePhoto = (props) => {
  return (
     альбом )} экспорт по умолчанию ClickablePhoto 

И я пробовал вот так:

  return (
    <div onClick={props.onClick} style={{backgroundImage: 'url(' + require(`${props.src}`) + ') background-size: cover'} } >
      <img  src={props.src} id={props.id}  alt="album" />
    </div>
  )

Но изображение sr c из реквизита выглядит так: /static/media/0_sJ1A5jGwSm66KCdV.e2451a3a.png и background-image: url не могу найти изображение

Answer 1

Вы не можете обрезать изображения с помощью элемента <img>. Вы можете использовать div с фоновым изображением:

<div class="image" style="background-image: url(...); background-size: cover;" />