How can i resize an image in a block display? (javascript or react)

Question

I'm creating a game, where I need a block of elements to be in line like on the following image. My problem is that the image (kangoroo) is appearing like this.

The real image size is width:70px and height:100px.

And I wanted to resize it to width: 49px and height: 70px.

I want to resize it in code because I'm using the normal size on another part of the code. I tried a lot of stuff but nothing works.

How can I fix this?

Game.js (some of the code)

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>

MatchedCard.js

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

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

export default MatchedCard;

MatchedCard.css

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

Possible duplicate of [Resize image proportionally with CSS?](https://stackoverflow.com/questions/787839/resize-image-proportionally-with-css) — computercarguy, Nov 05 '19 at 17:07

score 2 · Accepted Answer · answered Nov 05 '19 at 17:07

2

You should be able to set width and height properties directly on the <img /> element in HTML like this:

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

Then, to avoid repeating the same width and height for every image, you could abstract the generation of the <img /> element into a separate function, for example.

answered Nov 05 '19 at 17:07

ajobi

2,996
3
13
28

1

Alternatively, store a list of objects with `type`, `src` and `alt` attributes (or use other names that are more appropriate. Then `map()` over the list to create `` elements. – Code-Apprentice Nov 05 '19 at 17:14
@Code-Apprentice how to write that map()? That's seems interesting to me. A answer with more details would be great! – Telmo Pina Nov 05 '19 at 17:19
1

@TelmoPina That's an answer to a different question than the one you posted here. I suggest you look at other examples of `map()` and post a new question if you still need help. – Code-Apprentice Nov 05 '19 at 18:01

How can i resize an image in a block display? (javascript or react)

1 Answers1