2013-12-10 3 views
0

Я просматриваю страницу своего публичного сайта по адресу http://tcb.cbmiweb.com/UIForms/Subscribing.aspx, а графический пользователь, созданный с помощью Adobe Illustrator, отображает «правильно» как круг.Логотип с кружкой в ​​формате JPEG отображается как овальный в разработке, но ОК в публичном месте

Я использую Google Chrome и инструмент для разработчиков. Я привязываю открытую страницу к одной стороне моего монитора и привязываю эквивалентную страницу разработки (интрасети) к другой стороне. Используя Инструменты Google, я сравниваю размеры пикселей в aspnetForm и DIVs masterContainer и masterLogo и замечаю, что они идентичны. Вот несколько ключевых скриншотов из сайта intranet/dev для сравнения: greenshot taken with 2 Chrome windows snapped dividing screen

Я использовал WinDiff для сравнения содержимого открытого сайта с сайтом интранета, и все релевантность идентична. Очевидно, что сам графический файл JPEG отличается от общего публичного сайта (например, «Бета» и «Разработка». Размер байта открытого файла составляет 26 кбайт, а проблема «овала» для сайта интрасети - 37 кбайт. Когда я смотрю на оба файла с MS Paint они выглядят очень схожими (например, «круглые», «овальные» и т. д.). Все HTML и CSS для каждого из них одинаковы.

Оба обслуживаются IIS 6.0, работающих на разных экземпляры Windows Server 2003. Единственное, что я могу придумать, - это некоторая неясная настройка внутри графической программы, которую я не использую Adobe Illustrator. Является ли это «искажение» чем-либо, что может контролировать веб-разработчик?

ОБНОВЛЕНИЕ : Оба изображения имеют одинаковую ширину: функция устанавливает свойство .ImageURL в файле кода Site.Master.aspx.vb. Ома больше информации (идентичной как в государственном и частном сайте):

#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;" /> 
+0

Если вы повторно загрузите овальную версию файла изображения, aka сохраните его с сайта интрасети через ваш веб-браузер на свой компьютер, а затем откройте его ... это раунд? – Phil

+0

Да, это круто, но позвольте мне ясно, что я сделал. Из браузера Chrome я щелкнул правой кнопкой мыши на «овальном» изображении и сохранил его на локальном жестком диске, после чего открыл его, и он выглядит правильно вокруг. Средство просмотра по умолчанию для этого .JPG, сохраненного на моем ПК, является Picassa Photo Viewer, но есть много вариантов «Открыть с». Я НЕ переместил этот файл SAVED на свой сервер разработки. Это полезно? Я пошел «достаточно далеко» с вашей идеей? –

ответ

0

Оба изображения одинаковой ширины? Если оба изображения имеют разную ширину, то установка явной ширины в css может привести к растягиванию и искажению. Ваш скриншот на самом деле не показывает сам тег изображения, поэтому его трудно увидеть.

+0

Спасибо Эрик. См. Обновление к исходному сообщению, надеясь ответить на ваш вопрос. –