html - 如何让此标题图像正确缩放？

Question

我试图让这个标题图像缩放到我需要的任何大小，但它并没有完全做到这一点。网站上的一切都在缩放，但图像在右侧就像一两个像素。

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

是html

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

是 CSS

除了悬在上面的几个像素外，它看起来还不错。我怀疑这可能是因为它周围的黑色边框，但 border="0" 并没有消除它。有人有线索吗？因为我不...

score 1 · Accepted Answer

你可以像这样使用 CSS。

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

然后图像应缩放以适合其父容器的尺寸。

score 1 · Accepted Answer

您正在谈论的边框可能在图像上，然后您可以尝试放置类似

#headerpic img {
    border: none; 
}

进入你的 CSS。请参阅此jsfiddle上的示例。

2 回答 2