CODEWITHSUNDEEP
htmlcssimageheaderscaling
Jack E. Moore III
Jack E. Moore III

Reputation: 29

How do I get this header image to scale correctly?

I am trying to get this header image to scale to whatever size I need but it's not doing it exactly. Everything on the site is scaling, but the image is like one or two pixels off on the right side.

<div id="headerpic"><img style="width:100%" src="images/logo2.jpg"></div>

Is the html

#headerpic
{
position: relative;
height: 100%;
margin-bottom: 2px;
}

Is the CSS

It looks alright except for the few pixels hanging over. I suspect it might be because of the black border around it, but border="0" does nothing to remove that. Anyone have a clue? Cus I don't...

Upvotes: 0

Views: 3588

Answers (2)

Martin Turjak
Martin Turjak

Reputation: 21214

The border you are talking about might be on the image, then you can try putting something like

#headerpic img {
    border: none; 
}

into your CSS. See example on this jsfiddle.

Anyway, it would be helpful if you included a jsfiddle reconstruction of your problem with some more of your code.

Upvotes: 1

Ding
Ding

Reputation: 3085

You could use CSS like this.

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

The image should then scale to fit the dimensions of its parent container.

Recommendation from webdesignerwall.com

Upvotes: 1

Related Questions