How do I place an image in an area/shape by CSS using ReactJS?

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