0

I have been trying to resize this image in the following code. I have tried px, em, % and leaving the unit type blank but it will not resize. I have tried both width and height but neither make it change. The other attributes in the CSS are working fine: margin, position etc. Why won't the image resize?

Thank you so much for taking the time to read this and for your suggestion.

Code below

The HTML

    <div id='fixed-button'>

        <a href='main-home-timeline.html'>
          <img src='images/im-lost-clock.png'>
        </a>

        </div>

The CSS

    #fixed-button {
  position: fixed;
  width: 10;
  padding: 0;
  margin-top: 120px;
  margin-left: 600px;
}
WarriorMonkIRE
  • 29
  • 9
  • 1
    Your CSS is targeting the div, not the image. Values must always have a unit suffix. If you want the image to be the width of the parent, use `width: 100%` - on the image – Turnip Feb 28 '18 at 11:24
  • got to always check for this... targeting div here won't make it assume you want the img changed you must tell it to – L_Church Feb 28 '18 at 11:25
  • _"Values must always have a unit suffix"_ - unless the value is zero. – Turnip Feb 28 '18 at 11:31
  • Is my answer also correct? –  Feb 28 '18 at 11:37

4 Answers4

0

You have to put width and/or height attributes for the img element, i.e. either you define a class for the img and then put width: 10px in it, or use the selector #fixed-button a img

#fixed-button a img {
    width: 10px;
}
Gabriel Samain
  • 497
  • 3
  • 10
0

Your image needs to be width: 100%; if you plan to change the parent, so it can follow it. Or explicitly change image width with:

#fixed-button img {
 width: 100px;
}
zmuci
  • 518
  • 1
  • 5
  • 21
0

Just edit the Widthproperty to 100px so that you can solve the current problem.

#fixed-button {
  position: fixed;
  width: 100px;
  padding: 0;
  margin-top: 120px;
  margin-left: 600px;
}

Hope that this will help you...

Hari17
  • 481
  • 1
  • 4
  • 12
0

You are resizing the div element not the image element. The correct code is given below.

CSS

.fixed-button {
position: fixed;
width: 10px;
padding: 0px;
margin-top: 120px;
margin-left: 600px;
}
.img1 {
position: fixed;
width: 10px;
padding: 0px;
margin-top: 120px;
margin-left: 600px;
}

HTML

<div id="fixed-button" class="fixed-button">
<a href="main-home-timeline.html">
<img src="images/im-lost-clock.png" id="img1" class="img1" />
</a>
</div>