使容器的高度/宽度为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;
    }
  }
}

这就是图像失真的样子。

我了解了display: flex;和flex-flow: wrap;，看起来这就是他们的工作，也许我需要其他方法。

我尝试将max-height: 400px;设置为更高的值（例如2000），然后看起来像这样：

请告知：无论图像有多宽或多高，我都希望图像填充框！

更新

这里是组件

import React from 'react'

const ClickablePhoto = (props) => {
  return (
    <div onClick={props.onClick} className="image-card-small">
      <img  src={props.src} id={props.id}  alt="album" />
    </div>
  )
}

export default 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>
  )

但是道具中的图像src看起来像这样：/static/media/0_sJ1A5jGwSm66KCdV.e2451a3a.png和background-image: url找不到图像

Answer 1

您不能使用<img>元素来裁剪图像。 您可以将div与背景图片一起使用：

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