CODEWITHSUNDEEP
cssreactjs
8-Bit Borges
8-Bit Borges

Reputation: 10033

React div style

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?

Upvotes: 1

Views: 478

Answers (3)

Pengson
Pengson

Reputation: 875

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.

Upvotes: 0

akhtarvahid
akhtarvahid

Reputation: 9769

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/[email protected]"
              } 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/[email protected]"
              } alt=""
            />
            <h1 className="title is-4">"Item"</h1>
          </div>
        </div>

Upvotes: 1

Ashad
Ashad

Reputation: 2513

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

Upvotes: 0

Related Questions