JPEG 中带有圆圈的徽标在开发中呈现为椭圆形，但在面向公众的站点中可以

Question

我正在查看我在http://tcb.cbmiweb.com/UIForms/Subscribing.aspx 的公共网站的页面，而其他人使用 Adob​​e Illustrator 构建的图形“正确”地呈现为一个圆圈。

我正在使用 Google Chrome 和开发者工具。我将公共页面捕捉到显示器的一侧，并将开发（内部网）等效页面捕捉到另一侧。使用 Google 工具，我比较了 aspnetForm 和 DIV 的 masterContainer 和 masterLogo 的像素尺寸，并注意到它们是相同的。以下是来自 Intranet/dev 站点的一些关键屏幕截图，用于比较：

我使用 WinDiff 将公共站点的内容与 Intranet 站点进行了比较，所有相关的内容都是相同的。显然，JPEG 图形本身在公共站点中是不同的（例如“Beta”与“Development”。公共文件的字节大小为 26kb，而 Intranet 站点的“椭圆”问题为 37kb。当我查看这两个文件时使用 MS Paint，它们看起来非常相似（即都是“圆形”，没有“椭圆形”等）。所有的 HTML 和 CSS 都是相同的。

两者都由在 Windows Server 2003 的不同实例上运行的 IIS 6.0 提供服务。我唯一能想到的是图形程序中的一些模糊设置，即我不使用的 Adob​​e Illustrator。这种“扭曲”是 Web 开发人员可以控制的吗？

更新：两张图片的宽度相同；一个函数在 Site.Master.aspx.vb 代码隐藏文件中设置 .ImageURL 属性。以下是更多信息（公共和私人网站中的相同）：

#masterLogo
{
    width: 20%; display: table-cell; text-align: left; 
}

<div id="masterContainer">
<div id="masterLogo">
    <asp:Image ID="imgTCBLogo" runat="server" ImageAlign= "Top" 
            CausesValidation="False" 
            Width="180px" Height="100px">
    </asp:Image>
</div>

Me.imgTCBLogo.ImageUrl = UIF.SetLogoForMasterPage()

最后，这是“查看页面源代码”（来自“椭圆形”网站）的渲染 IMG 标记：

        <img id="ctl00_imgTCBLogo" CausesValidation="False" src="../Images/TCBlogo-development-small.JPG" align="top" style="height:100px;width:180px;border-width:0px;" />

Answer 1

两个图像的宽度相同吗？如果两个图像的宽度不同，那么在 css 中设置显式宽度可能会导致一个图像拉伸并变形。您的屏幕截图实际上并未显示图像标签本身，因此很难看到。