如何使用 ReactJS 将图像放置在 CSS 的区域/形状中？

Question

因此，我正在尝试为《守望先锋》构建一个团队选择器，并且我有一个网站，其中卡片横向排列。 它们是空白的灰色卡片。 它们使用以下 JSX 代码放置：

import React from 'react';
import './heroes.css';

const heroes = () => {
  return (
      <div>
          <div className='hero-container'> {
            displayHeroes()
          }
          </div>
      </div>
  )
};

const displayHeroes = () => {
  const row = [];
  const heroes = ['Dva','Orisa','Rein','Hog','Sigma',
                  'Winston','Ball','Zar','Ashe,','Bastion',
                  'Cassidy','Doom','Echo','Genji',
                  'Hanzo','Junkrat','Mei','Pharah',
                  'Reaper','Soldier','Sombra','Sym',
                  'Torb','Tracer','Widow','Ana',
                  'Bap','Brig','Lucio','Mercy',
                  'Moira','Zen'];
  for (let i =0; i<32; i++){
      row.push(<div className='hero scale-up-ver-bottom '>
        <img src="" alt={heroes[i]} />
      </div>)
  }
  return row;
};

heros() 只是给出一个 div 来放入所有卡片，而 displayHeroes() 循环遍历一组英雄并将 alt 文本分配给每张卡片，并返回一个要渲染的 div 数组。 当我将文件路径放在src=""中时，什么也没有发生。

.hero {
    background-color: gray;
    width: 30px;
    height: 50px;
    margin-top: 10px;
    margin-right: 2.5px;
    margin-left: 2.5px;
    padding: 20px;
    border-radius: 10px;
    flex-shrink: 0;
    box-shadow: 0px 5px 10px gray;
    outline-style: solid;
    outline-width: 2.5px;
    outline-color: black;
}

.hero img {
    width: 100%;
    height: 100%;
}

如何将图像放入由 css 属性定义的形状内？ 我想不通。

Answer 1

我会将图像设置为背景并使用

background-size: contain

在此处查找有关background-size更多信息： https://www.w3schools.com/cssref/css3_pr_background-size.asp