CODEWITHSUNDEEP
javascriptreactjs
Telmo Pina
Telmo Pina

Reputation: 51

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

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?

enter image description here

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

Upvotes: 0

Views: 277

Answers (1)

ajobi
ajobi

Reputation: 3116

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.

Upvotes: 2

Related Questions