CODEWITHSUNDEEP
reactjs
jennielisajane
jennielisajane

Reputation: 261

how to resize img in React

 render() {
   <img className="photo" src={"/public/love"} />

 }

I have a css file linked to it and it still isn't working

 .photo {
      height: 100px;
      width: 100px; 
 }

How can you resize an img in react?Thanks!

Upvotes: 22

Views: 174915

Answers (4)

Purity1
Purity1

Reputation: 11

You can try inline styling like this:

<img className="photo" src={"/public/love"} style={{height:100, width:100}} />

Upvotes: 0

haroon kiani
haroon kiani

Reputation: 329

This is another way to give the size to the image in the latest Reactjs direct in the code. you can also use the classes to target the image.

<img src='imagepath.jpg' width={250} height={250} alt='Large Pizza' />

Upvotes: 21

msr_overflow
msr_overflow

Reputation: 122

You probably need to use the proper jsx syntax. 

render() {
    return <img className="photo" src={ require('/public/love') } />;
}

Otherwise the css looks fine.

Upvotes: 1

tarzen chugh
tarzen chugh

Reputation: 11247

I am not sure if the import of css is wrong there something else that is causing the issue. Working codesandbox link

import React from "react";
import ReactDOM from "react-dom";
import panda from "./images/panda.png";

import "./styles.css";

function App() {
  return (
    <div>
      <img alt="panda" className="photo" src={panda} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

styles.css

.photo {
  height: 200px;
  width: 200px;
}

Hope that helps!!!

Upvotes: 14

Related Questions