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

Guide to integrating animations into a React JS array sorting program

Conflict between Angular's ng-repeat directive and Sass styling

Is it possible to target the initial sibling of a parent element using a CSS selector?

Unable to Locate CSS File in Separate Folder in HTML

MaterialUI Divider is designed to dynamically adjust based on the screen size. It appears horizontally on small screens and vertically on

The Disabled element does not exhibit effective styling

Selecting the initial and final elements in a list without utilizing pseudo-classes

Conceal the object, while revealing a void in its place

Contact form functions correctly when used locally, but encounters issues when accessed online

When attempting to import and utilize a component from a personalized React Component Library, it leads to an Invariant Violation error stating: "

Can you please tell me the font size specified as 20px/26px?

I'm looking to enhance my redux state by implementing filters for a more precise control over the data. Where should I place the

Could really use a hand getting this card grid to be more responsive

Creating a React component that allows for pagination using data fetched from a

Guide to creating a responsive layout using CSS and HTML

Any tips on how to export the index file from Firebase after switching from using require statements to import statements?

Component not being returned by function following form submission in React

The process of updating a nested object property in Redux and React

Types with conditions but no common parameter

Here's how you can combine two individual LESS files using grunt-recess