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!

3 Answers

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!!!

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' /> 

You probably need to use the proper jsx syntax.

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

Otherwise the css looks fine.