如何让此标题图像正确缩放？答案

【问题标题】：How do I get this header image to scale correctly?如何让此标题图像正确缩放？
【发布时间】：2013-05-01 00:38:51
【问题描述】：

我正在尝试将此标题图像缩放到我需要的任何大小，但它并没有完全做到这一点。网站上的所有内容都在缩放，但图像在右侧偏移了一两个像素。

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

是html

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

是CSS

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

【问题讨论】：

【解决方案1】：

您所说的边框可能在图像上，然后您可以尝试放置类似的东西

#headerpic img {
    border: none; 
}

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

【讨论】：

谢谢，边框：没有添加到样式部分有效。这就是问题所在。我假设如果边框是图像的一部分，那么就不会有问题，因为它符合像素比例规范。但是由于浏览器正在添加它，除了图片本身之外，它还会将其扔掉 2 个像素。

【解决方案2】：

你可以像这样使用 CSS。

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

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

【讨论】：