如何使用 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