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

Question

So I am trying to build a team picker for Overwatch, and I've got a website with cards laid out in a horizontal row. They are blank, gray cards. They are placed using the following JSX code:

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;
};

heroes() just gives a div to put all the cards into, and displayHeroes() loops through an array of heroes and assigns alt text to each card, and returns an array of divs to be rendered. When I put a filepath in src="" nothing happens at all.

.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%;
}

How can I put an image inside a shaped defined by css properties? I can't figure it out.

Answer 1

I would set the image as background and use

background-size: contain

Find more about background-size here: https://www.w3schools.com/cssref/css3_pr_background-size.asp