如何调整块显示中图像的大小？（javascript或react）

我正在创建一个游戏，在这里我需要一个元素块，就像下图所示。我的问题是图像（kangoroo）是这样出现的

实际图像大小为

宽度：70px

和

高度：100px

我想把它的大小调整到

宽度：49px

和

高度：70px

我想在代码中调整它的大小，因为我在代码的另一部分使用正常大小。我试了很多东西，但都不管用

我怎样才能解决这个问题

Game.js（部分代码）

---

您应该能够直接在

上设置
宽度
和
高度
属性；
案例“B”：
// ...
}
}

---

然后，为了避免对每个图像重复相同的宽度和高度，您可以将

元素的生成抽象为一个单独的函数，例如。

您应该能够直接在

上设置
宽度
和
高度
属性；
案例“B”：
// ...
}
}

---

然后，为了避免对每个图像重复相同的宽度和高度，您可以将

元素的生成抽象为一个单独的函数，例如。

的可能重复项的可能重复项。或者，存储具有

类型

、

src

和

alt

属性的对象列表（或者使用其他更合适的名称。然后在列表上创建

元素。@code学徒如何编写该映射（）？这对我来说似乎很有趣。一个更详细的答案会更好！@TelmoPina这是一个不同于你在这里发布的问题的答案。我建议你看看

map（）的其他示例

并在您仍然需要帮助时发布新问题。或者，存储具有

类型

、

src

和

alt

属性的对象列表（或使用其他更合适的名称）。然后在列表上创建

元素。@code学徒如何编写该映射（）？这对我来说似乎很有趣。一个更详细的答案就太好了！@TelmoPina这是一个不同于您在这里发布的问题的答案。我建议您查看

map（）

的其他示例，如果您仍然需要帮助，请发布一个新问题。

import React from "react";
import "./Game.css";
import MatchedCard from "../MatchedCard/MatchedCard"
import imagem1 from "../../cardimages/1.jpg";
import imagem2 from "../../cardimages/2.jpg";
import imagem3 from "../../cardimages/3.jpg";

    renderImage(cardType) {
            switch(cardType) {
            case 'A':
              return <img src={imagem1} alt="Raposa"/>;
            case 'B':
              return <img src={imagem2} alt="Cobra"/>;
            case 'C':
              return <img src={imagem3} alt="Galinha"/>;
        // and so on...

    renderMatchedCardTable() {
      return this.state.matchedcardArray.map((matchedcard, index) => {
        const { cardType, cardState, isDisabled } = matchedcard;
        return (
          <MatchedCard
            key={index}
            cardType={cardType}
            cardState={cardState}
            isDisabled={isDisabled}
        />
      );
    });
  }

render() {
    return (

    <div className="Table-wrapper">
        <div className="GameRectangle3">{this.renderMatchedCardTable()}</div> 

import React from "react";
import "./MatchedCard.css";

const MatchedCard = ({ cardState}) => (
  <div className="matchedcard">
  <div className="matchedcardState">{cardState}</div>
  </div>
);

export default MatchedCard;

.matchedcard{
float:left;
display:block;
width:49px;
height:70px;
border: 1px solid #aaa;
border-radius: 5px;
margin: 2px;
background-color: #afafaf;
  }

 .matchedcardState{
  font-size: 8px;
 }

renderImage(cardType) {
  switch(cardType) {
    case 'A':
      return <img src={imagem1} alt="Raposa" width="49px" height="70px"/>;
    case 'B':
      // ...
  }
}