因此，我正在嘗試為《守望先鋒》構建一個團隊選擇器，并且我有一個網站，其中卡片橫向排列。它們是空白的灰色卡片。它們使用以下 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 屬性定義的形狀內？我想不通。
uj5u.com熱心網友回復：
我會將影像設定為背景并使用
background-size: contain
在此處查找更多資訊background-size：https ://www.w3schools.com/cssref/css3_pr_background-size.asp
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/420256.html
標籤：
上一篇：過渡時側邊欄導航文本不平滑