帶有圓圈的JPEG徽標在開發中呈現爲橢圓形，但在公共場所可以使用

我正在查看我的公共站點http://tcb.cbmiweb.com/UIForms/Subscribing.aspx的頁面，其他人使用Adobe Illustrator構建的圖形呈現爲「正確」爲圓形。帶有圓圈的JPEG徽標在開發中呈現爲橢圓形，但在公共場所可以使用

我使用Google Chrome和開發工具。我將公共頁面捕捉到監視器的一側，並將開發（Intranet）等效頁面捕捉到另一側。使用Google工具，我比較了aspnetForm和DIVs masterContainer和masterLogo的像素尺寸，並注意它們是相同的。下面是一些來自Intranet/dev站點的關鍵屏幕截圖： greenshot taken with 2 Chrome windows snapped dividing screen

我已經使用WinDiff將公共站點的內容與Intranet站點進行比較，並且所有相關內容都相同。顯然，JPEG圖形本身在公共站點上是不同的（例如「Beta」與「Development」），公共文件的字節大小爲26kb，而Intranet站點的「橢圓」問題爲37kb。當我查看這兩個文件與MS Paint他們看起來非常相似（即「圓」，沒有「橢圓」等）。所有的HTML和CSS每個都是一樣的

兩者都由IIS 6.0運行Windows Server 2003的實例。我能想到的唯一的問題是Graphics程序中的一些模糊設置，它是Adobe Illustrator，我不使用這種「變形」，Web開發人員可以控制的任何東西嗎？

UPDATE ：這兩個圖像的寬度相同;一個函數在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;" />

來源

2013-12-10 John Adams

如果您重新下載圖像文件的橢圓形版本，即通過您的網絡瀏覽器將其從內部網站保存到您的計算機，然後打開它...是圓的嗎？ – Phil

是的，它是圓的，但讓我清楚我做了什麼。在Chrome瀏覽器中，我右鍵單擊「橢圓形」圖像並將其保存到本地硬盤，然後將其打開並看起來正確。保存到我的PC的這個.JPG的默認瀏覽器是Picassa Photo Viewer，但有很多「Open With」選項。我沒有把這個SAVED文件移到我的開發服務器上。這有幫助嗎？你的想法是否「足夠」？ –

兩幅圖像的寬度是否相同？如果兩幅圖像的寬度不同，那麼在CSS中設置一個明確的寬度可能會導致一個圖像拉伸並變形。您的屏幕截圖實際上並未顯示圖片標籤，因此很難看清楚。

來源

2013-12-10 19:14:04 Eric

謝謝埃裏克。請參閱更新到原始文章希望回答你的問題。 –

帶有圓圈的JPEG徽標在開發中呈現爲橢圓形，但在公共場所可以使用

回答

相關問題