html: Image doesn't change size in css-CodePudding

I want to change my image size with my style.css but it doesn't apply.

Here is my style:

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

And here is how I'm trying to insert my image:

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

I tried this and it worked, but I want to have other images in different sizes. So this is not an option:

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

CodePudding user response：

Try this in HTML

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

CodePudding user response：

Try This :

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

CodePudding user response：

You are resizing the parent element. There are multiple ways to fix this.

You could:

Move the class to the image

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

<div>
  <img  src="//picsum.photos/1920/1080" alt="your image">
</div>

select the image in the css

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

<div >
  <img src="//picsum.photos/1920/1080" alt="your image">
</div>

or change the size of the image to 100%.

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

    <div >
      <img  src="//picsum.photos/1920/1080" alt="your image">
    </div>

CodePudding user response：

Maybe it is because the <div> element is not on the same indention level as its end tag.

So, maybe try:

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