React div style - css

Question

I'm new to styling, sorry if this is too basic.
In my React app, I am trying to import an image from file, like so:
import cup from './img/cup.png'
and style it alongside text and everything else contained in the <div> like so:
<div style={{display:'inline-block',
textDecoration:'underline',
cursor:'pointer'}}>
<img src={cup} alt=''/>
<h1 className="title is-4">"Item"</h1>
</div>
But this works badly. Image display is too big.
I would like to reference image right into style and manage 'height' and 'width' (or 'size') within it as well, but haven't found a way.
is this possible? how so?

Answer 1

Try this if you want in vertical
<div>
<div style={{ display: "inline-block",
textDecoration: "underline",cursor: "pointer"}}>
<img
style={{ height: 100 }} src={
"https://www.belightsoft.com/products/imagetricks/img/intro-video-poster#2x.jpg"
} alt=""
/>
<h1 className="title is-4">"Item"</h1>
</div>
</div>
and if you want in horizontal
<div>
<div style={{ display: "flex", textDecoration: "underline", cursor: "pointer"}}>
<img style={{ height: 100 }} src={
"https://www.belightsoft.com/products/imagetricks/img/intro-video-poster#2x.jpg"
} alt=""
/>
<h1 className="title is-4">"Item"</h1>
</div>
</div>

Answer 2

just add height and width size to your image, like this
<img src={cup} alt='' height={50} width={50} />
also, you can add auto to and set the size to another it will work best
<img src={cup} alt='' height={50} width='auto' />
<img src={cup} alt='' height='auto' width={50} />

Answer 3

Basically the first step of you is to learn what a selector is. In short, it is a naming convention to link style with the HTML tag(s)(or dom, whatever). For example, let's say you put a class to the image.
<div>
<img src={cup} alt='' className="my-image"/>
<h1 className="title is-4">"Item"</h1>
</div>
And a CSS file, which you have to import it as a dependency of the component at the header of source file, next to the import cup from './img/cup.png'.
style.css
img.my-image {
// css rules here
}
Then the magic occurs, the CSS rule, e.g., the absolute/relative width/height written in the file will be applied to the image accordingly.