Why will this image not resize?

I’m having an issue where an image is overlapping some stuff, keeping them from working. The image has a canvas much bigger than the image itself, so I went into Photoshop and adjusted the image and canvas size, went back to visual studio and ran it again, now the image is way too big (which it should have been smaller), and no matter what I do it stays the same. I have tried changing the size in css, in photoshop, and I have cleared the cache on the site to make sure that isn’t causing any problems.

html:

<div id="spacerDiv">
                <a class="navbar-left"><img id="logo" src="\Images\SC2_MyLink_Logo.png" alt="Browser does not support image."/></a>
            </div>

css:

#logo {
    position: absolute;
    height: 10em;
    width: auto;
    padding: 0;
    margin-top: 0;
}
#spacerDiv {
    height: 8em;
    width: 22em;
}

You’ve got a two fold problem…

  • You’ve got a height that is larger than the container it is in. Since 10em > 8em, there’s going to be overlap.
  • The position absolute is taking the logo out of the css dom, for lack of a better term.

I’m assuming that you want the logo to be constrained to the size of the spacerDiv? If so,

  • Either a) remove the position: absolute from the #logo or add position: relative to the #spacerDiv
  • Change the height of the #logo to 100%

Ok, so I removed the position:absolute, and set the height to 100%, but still no change.

It’s hard to advise without knowing a few things, such as the context of the image with the page and what your intended layout actually is.

Sure no problem, below is a picture of the site. The logo, which is obviously huge, just needs to be located in the upper left side of the webpage, fitting nicely into the heading.

How about posting a link to that site so we can see the code that makes it tick?

1 Like

Then there’s more css being applied (use the inspect element) because the basics of what I gave you should have worked. Do you have a min-height on the logo perhaps?

The site is not active yet, it’s running locally. Is there a way I can still get that to you?

I don’t know of an easy way to do that.

Therefore, you need to create a standalone “working page” that contains the code and resources (or links to them) necessary to demonstrate the issue and post that “working page”. In other words, if you can open that “working page” in your browser and see the problem, then we should be able to do the same.

Including too little code won’t do it.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.