html: Changing the size of an image isn't reflected in the CSS

I'm having trouble changing the size of my image using my style.css file.

This is the CSS code in my style sheet:

    .headerImage {
    width: 100px;
    height: 100px;
}

Below is how I am trying to display my image:

<div class="headerImage">
            <img src="/images/header-image.png" alt="your image">
        </div>

While this method worked for a specific image, I want the flexibility to use images of different sizes. Hence, the following solution is not ideal:

img {
width: 100px;
height: 100px;
}

Answer №1

When adjusting the size of the parent element, there are several solutions available.

You could:

Transfer the class to the image

.headerImage {
  width: 100px;
  height: 100px;
}
<div>
  <img class="headerImage" src="//picsum.photos/1920/1080" alt="your image">
</div>

target the image in the css

.headerImage img {
  width: 100px;
  height: 100px;
}
<div class="headerImage">
  <img src="//picsum.photos/1920/1080" alt="your image">
</div>

or adjust the image size to be 100%.

.headerImage {
  width: 100%;
  height: 100%;
}
.headerImageWrapper {
  width: 100px;
  height: 100px;
}
    <div class="headerImageWrapper">
      <img class="headerImage" src="//picsum.photos/1920/1080" alt="your image">
    </div>

Answer №2

Experiment with this HTML code

<header>
    <img class="mainImage" src="/images/main-image.png" alt="image sample">
  </header>

Answer №3

Check out this example:

.mainImage img 
  {
  max-width: 200px;
  height: auto;
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Refresh the browser tab's content

How can I reload the specific content of a browser tab? I am looking for a solution that does not rely solely on jQuery (although I prefer it if there are more options available). Here is what I need: I have a page with many links to other pages (the fo ...

What is the best way to position a div below another sticky div when the first div's height is constantly changing

I am facing a challenge with scrollable text and sticky headers on my webpage. The top text has dynamic height based on the content below, which is followed by a sticky header with its own dynamic height. Now, I want to add another sticky header below the ...

Tips for creating responsive designs with specific media queries for various device sizes

I am looking to create a responsive website using media queries and have already created different media queries for mobile, tablets, and desktops. However, I am unsure if I should be writing the same CSS code multiple times for various device sizes, such ...

Why is my HTML a:active not functioning properly?

CSS Code for Highlighting Active Tab: // To highlight the current tab that the user is viewing // CSS styles for the active tab .HeaderTabs li.tab a { display: block; // Defines anchor tab padding: 12px 8px 12px 8px; } .HeaderTabs li.ta ...

dispatching divisional content via email

My form has inputs for a name and email address. Here is the code: <form role="form" method="post" action="email.php"> <input type="text" class="sendmail" name="name" placeholder="Your name" /> <input type="text" class="sendmail" name ...

Why are the elements not aligned in a single row?

Can anyone explain why these two elements are not displaying on the same row when using Bootstrap 4? <div class="container"> <div class="row"> <div class="col-lg-2"> <a class="logo"><img class="logo__img" src= ...

What is the best way to create a fullscreen div without using an iframe?

My website features various div elements acting as separate windows. However, when I remove these divs, the content no longer fits the entire page. I attempted to use CSS to make it full-page without using iframes, just with a simple <p>Test</p& ...

Tips for dynamically updating an HTML value with Javascript

Summary of My Issue: This involves PHP, JS, Smarty, and HTML <form name="todaydeal" method="post"> <span id="fix_addonval"></span> <input type="radio" name="offer" id="offer_{$smarty.section.mem.index+1}" value="{$display_offe ...

The division is now appearing below the preceding division instead of following it

I am currently encountering an issue that I believe has a simple solution, but I am unable to find it. I have two divs in my code. The first div contains a blurred background image and content, which is working perfectly fine. However, the second div is n ...

The issue with the data backdrop not functioning properly in Angular 6 is ongoing and

My issue lies with the data-backdrop attribute in my Bootstrap 4 modal. It does not function as expected. The intended behavior is for the modal to close when clicked outside of it, but this is not happening. I am using Angular 6: I have attempted setting ...

Am I utilizing the appropriate method to change the color of my element to red?

I'm currently attempting to change the color of all three headers to red when the "Red Headings" button is clicked by utilizing the changeStuff function. However, it doesn't appear to be functioning correctly. Can someone confirm if this is the a ...

php issue with SQL update query not affecting database

Attempted to modify my database through a PHP file containing an HTML form. When clicking 'update' in the URL, the updated information displays. However, upon returning to the HTML page showcasing all database content, the old information remains ...

Child absolute div is getting cropped due to overflow auto of parent absolute div

I am facing an issue with a div that is absolutely positioned within another div with overflow set to auto. The problem is that the child div is being cut off due to the overflow. I want the child div to break free from the container div, similar to how it ...

The 'slide.bs.carousel' event in Bootstrap carousel is triggered just once

Take a look at my JavaScript code: $('#carousel-container').bind("slide.bs.carousel", function () { //reset the slideImg $('.slideImg',this).css('min-height', ''); //set the height of the slider var ...

Is there a way to ensure that the border of a textarea matches the border of a text input?

My goal is to make the textarea fields in my form have the same appearance as the text input fields, regardless of the browser being used. I am interested in achieving this without imposing a customized style, but instead by leveraging the standard style w ...

The arrangement of objects looks distinct once it is shared with the public

After developing a website and debugging it in Visual Studio using the "view in browser" feature, I deemed it ready for deployment onto our test server. However, upon checking the page from the server's address, certain elements appeared differently t ...

Every time I use formsubmit.co on my Github pages, I encounter a 404 error

Currently, I'm in the process of constructing a website with Bootstrap 5 and have integrated a form that is intended to be completed and forwarded to my email address. I've chosen to utilize formsubmit.co for this purpose. However, when I attempt ...

What is the process for altering the color and text of the designated element using an if-else statement?

Issue: I would like to change the color of the first link to black and the remaining two links to gray when the continue button is clicked once. Then, on the second click of the continue button, I want the color of the second link to be changed to black wh ...

Ways to Retrieve the Text From the Selected Index in Datalist Element

I need to extract the inner text of the option tag using pure JavaScript This is the HTML code I am working with: <input list="in" name="i_n" class="form-control" placeholder="Enter Item Name" required> <datalist id="in" onChange="rate(this)"&g ...

Adding text over an image in Tailwind without the need for absolute positioning is achievable

I'm struggling to position text over an image without using absolute positioning. It's working fine on large and small screens, but I'm having trouble with medium screens. I've searched for similar questions on Stack Overflow, but none ...