Styling a div element in React

Question

Styling a div element in React

Just dipping my toes into the world of styling here, so bear with me.

I'm currently working on a React app and attempting to bring an image from a file using the following code:

import cup from './img/cup.png'

My goal is to style it in conjunction with text and other content within the <div>. Here's what I have tried:

<div style={{display:'inline-block', 
             textDecoration:'underline', 
             cursor:'pointer'}}>
  <img src={cup} alt=''/>
  <h1 className="title is-4">"Item"</h1>
</div>

Unfortunately, this setup doesn't work quite as expected. The image appears too large for my liking.

I've been exploring options to directly reference the image within the inline styles and also control its 'height' and 'width' properties, but haven't come across a solution yet.

Is there a way to achieve this? If so, how can it be done?

css reactjs

Answer 1

Answer №1

For a vertical layout, try this code snippet:


        <div>
          <div style={{ display: "inline-block",
              textDecoration: "underline",cursor: "pointer"}}>
            <img
              style={{ height: 100 }} src={
                "https://www.belightsoft.com/products/imagetricks/img/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="462f283234296b302f2223296b36293532233406743e682c3621">[email protected]</a>"
              } alt=""
            />
            <h1 className="title is-4">"Item"</h1>
          </div>
        </div>

If a horizontal layout is more to your liking, you can use the following code:


      <div>
          <div style={{ display: "flex", textDecoration: "underline", cursor: "pointer"}}>
            <img style={{ height: 100 }} src={
                "https://www.belightsoft.com/products/imagetricks/img/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aec7c0dadcc183d8c7cacbc183dec1dddacbdcee9cd680c4dec9">[email protected]</a>"
              } alt=""
            />
            <h1 className="title is-4">"Item"</h1>
          </div>
        </div>

Answer 2

For a vertical layout, try this code snippet:


        <div>
          <div style={{ display: "inline-block",
              textDecoration: "underline",cursor: "pointer"}}>
            <img
              style={{ height: 100 }} src={
                "https://www.belightsoft.com/products/imagetricks/img/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="462f283234296b302f2223296b36293532233406743e682c3621">[email protected]</a>"
              } alt=""
            />
            <h1 className="title is-4">"Item"</h1>
          </div>
        </div>

If a horizontal layout is more to your liking, you can use the following code:


      <div>
          <div style={{ display: "flex", textDecoration: "underline", cursor: "pointer"}}>
            <img style={{ height: 100 }} src={
                "https://www.belightsoft.com/products/imagetricks/img/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aec7c0dadcc183d8c7cacbc183dec1dddacbdcee9cd680c4dec9">[email protected]</a>"
              } alt=""
            />
            <h1 className="title is-4">"Item"</h1>
          </div>
        </div>

Answer 3

Answer №2

To adjust the size of your image, simply include height and width attributes like so:

  <img src={cup} alt='' height={50} width={50} />

You can also use 'auto' as a value for one attribute while specifying the other for best results:

  <img src={cup} alt='' height={50} width='auto' />

  <img src={cup} alt='' height='auto' width={50} />

Answer 4

To adjust the size of your image, simply include height and width attributes like so:

  <img src={cup} alt='' height={50} width={50} />

You can also use 'auto' as a value for one attribute while specifying the other for best results:

  <img src={cup} alt='' height={50} width='auto' />

  <img src={cup} alt='' height='auto' width={50} />

Answer 5

Answer №3

First and foremost, it's crucial to understand what exactly a selector is. Simply put, it serves as a way to connect style with HTML tags (or the DOM). For instance, if you assign a class to an image.

<div>
  <img src={cup} alt='' className="my-image"/>
  <h1 className="title is-4">"Item"</h1>
</div>

In your CSS file, which must be imported as a component dependency at the beginning of the source file alongside import cup from './img/cup.png'.

style.css

img.my-image {
  // Add your CSS rules here
}

Then comes the magic - the CSS rule you define in the file, such as specifying absolute/relative width or height, will then be applied to the image accordingly.

Answer 6

First and foremost, it's crucial to understand what exactly a selector is. Simply put, it serves as a way to connect style with HTML tags (or the DOM). For instance, if you assign a class to an image.

<div>
  <img src={cup} alt='' className="my-image"/>
  <h1 className="title is-4">"Item"</h1>
</div>

In your CSS file, which must be imported as a component dependency at the beginning of the source file alongside import cup from './img/cup.png'.

style.css

img.my-image {
  // Add your CSS rules here
}

Then comes the magic - the CSS rule you define in the file, such as specifying absolute/relative width or height, will then be applied to the image accordingly.

Styling a div element in React

Answer №1

Answer №2

Answer №3

Similar questions

Error encountered while utilizing MUI Button: Unable to access property 'borderRadius' from an undefined source

Can anyone provide a method for obtaining a date that is x days earlier through date arithmetic?

The request for http://localhost:8000/index.js was unsuccessful and returned a 404 (not found) error

I can't seem to figure out why my container is not centered on the screen, despite setting the margins (left and right) to auto

Nodemailer experiencing issues transmitting emails with multiple attachments on Vercel's development environment

Why am I encountering a warning about dangerouslySetInnerHTML and receiving empty content in Next.js?

Unable to record Npm installations in package.json file

Stopping jQuery fadeOut from setting the display property to 'hidden'

Unable to modify language settings in DatePicker - Material UI

Attempting to store an array of JSON objects in the state, and then utilizing the `map` method to render

How to isolate a function in React when mapping data

The integration between React.js, Node.js, and Express.js is facing issues with the socket.io functionality

Bond the action parameters within the mapDispatchToProps function

Auto-collapse sidebar upon clicking anywhere on the page

Is it better to import and use useState and useEffect, or is it acceptable to utilize React.useState and React.useEffect instead?

Error: File not found when attempting to push repository to Heroku from master branch

Restricting access to my API to only permit communication with my designated front-end application

Are you currently utilizing React Material-UI in your operations? If so, what are the reasons behind your decision

Linking all styles with Angular 2

What is the best way to dynamically assign a value to a prop of type PropTypes.node.isRequired in a Jest Enzym