为什么我无法在asp.net网站上指定图像的高度和宽度？ （包括html输出）

Question

每当我在Google或GMetrix上进行速度测试时，他们总是给我一个F，因为他们说我没有指定我的图像尺寸，因此需要更多的http请求。但是在我的asp.net（vb）网站上，他们指定的链接是链接按钮，看起来像使用CssClass ：

<asp:Image ID="Image9" runat="server" ImageUrl="~/images/flagpt.png" 
CssClass="flagbutton" tooltip="Veja este site em português" 
title="Veja este site em português"/>

这导致 html输出（使用CssClass）但仍然没有img维度：

<img id="Image9" title="Veja este site em português" 
 class="flagbutton" title="Veja este site em português" 
 src="images/flagpt.png" />

但是，如果我只是将 height =“15”width =“26”这样，它仍然不工作：

  <asp:Image ID="Image7" runat="server" ImageUrl="~/images/flagde.png" 
  height="15" width="26" tooltip="View this website in Deutsch" 
  title="View this website in Deutsch"/>

这导致 html输出，但速度测试不会检测到img尺寸：

<img id="Image7" title="View this website in Deutsch" 
   title="View this website in Deutsch" 
   src="images/flagde.png" style="height:15px;width:26px;" />

速度测试仍然表明我没有指定我的尺寸。任何建议，以帮助我这将是非常感谢！

Answer 1

首先，不指定图像尺寸不会导致额外的HTTP请求。这可能导致浏览器在下载图像后不得不重新流动文档，但这是一个不同的问题。

其次， 指定了您的图片尺寸。它就在输出中：

style="height:15px;width:26px;"

也不一定要指定width和height属性。

如果您确实要强制输出包含width和height属性，则需要使用自定义控件或控件适配器。这样的事情可以解决问题：

public class ImageDimensionsAdapter : WebControlAdapter
{
   protected override void Render(HtmlTextWriter writer)
   {
      var image = Control as Image;
      if (image != null)
      {
         Unit size = image.Width;
         if (!size.IsEmpty && size.Type == UnitType.Pixel)
         {
            writer.AddAttribute(HtmlTextWriterAttribute.Width, size.Value.ToString("###0"));
         }

         size = image.Height;
         if (!size.IsEmpty && size.Type == UnitType.Pixel)
         {
            writer.AddAttribute(HtmlTextWriterAttribute.Height, size.Value.ToString("###0"));
         }
      }

      base.Render(writer);
   }
}

要应用它，请在.browser目录中添加包含以下内容的App_Browsers文件：

<browsers>
   <browser refID="Default">
      <controlAdapters>
         <adapter
            controlType="System.Web.UI.WebControls.Image"
            adapterType="ImageDimensionsAdapter"
         />
      </controlAdapters>
   </browser>
</browsers>