How to Resize Img in React
Render() { } 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...
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.
Sarah Jenkins is a veteran tech journalist with over 12 years of experience covering artificial intelligence, mobile innovations, and digital ethics. Her insights have appeared in leading technology publications worldwide.
