GridViewImageField.aspx font size:
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.OleDb" %>

<html>
<head>
<title>GridView ImageField Example</title>
<link rel="stylesheet" href="/shared/netdemos.css">

<script language="C#" runat="server" src="fetchData_oledb.cs" />

<style type="text/css">
.desc {
   font:bold 12pt arial,verdana,sans-serif; background:khaki; 
   border:1px inset; padding:10; margin-bottom:10}
.features {
   font-size:10pt; background:#efefef;
   border:1px inset; padding-right:5; margin-bottom:10}
.specs {
   font-size:10pt; background:beige; 
   border:1px inset; padding-right:5}
</style>

<script language="C#" runat="server">
   void getSelected ( Object src, EventArgs e ) {
      string id = myGrid.SelectedDataKey.Value.ToString ( );
      string query = "Select* FROM Plans where PlanID = '" + id + "'";
      planDetails.DataSource = fetchReader ( query, "plans" );
      planDetails.DataBind ( );
      ShowHidePanel ( null, null );
   }

   void ShowHidePanel ( Object src, EventArgs e ) {
      selectPanel.Visible = ! ( selectPanel.Visible );
      detailsPanel.Visible = ! ( detailsPanel.Visible );
   }
</script>
</head>

<body>
<!-- #include virtual="~/shared/top.inc" -->
<div class="header"><h2>GridView <span class="hilite">ImageField</span> Example</h2></div>
<hr size=1 width=92%>

<div align="center">
<form runat="server">
<asp:panel id="selectPanel" runat="server">
   Select Design Type: <asp:dropdownlist id="typesSelect" runat="server" 
      datasourceid="planTypes" datatextfield="Type" autopostback />

   <p>

   <asp:gridview id="myGrid" runat="server"
      datasourceid="plans" datakeynames="planId"
      width=80% cellpadding=3 gridlines="horizontal"
      autogeneratecolumns=false
      allowpaging pagesize=7
      onSelectedIndexChanged="getSelected">

      <headerstyle backcolor="slategray" forecolor="khaki"
         font-name="Comic Sans MS" font-bold />

      <selectedrowstyle backcolor="lightgreen" />

      <pagersettings
         mode="nextpreviousfirstlast" />

      <pagerstyle
         backcolor="steelblue" forecolor="beige"
         horizontalalign="right" />

      <columns>
         <asp:imagefield dataimageurlfield="PlanID"
            dataimageurlformatstring = "~/shared/images/plans/thumbs/{0}.jpg"
            dataalternatetextfield="Model"
            readonly="true">
               <controlstyle width=75
                  borderwidth=1 borderstyle="inset" />
         </asp:imagefield>

         <asp:templatefield headertext="Choose your dream home">
            <itemtemplate>
               <asp:linkbutton runat="server" commandname="select" 
                  text='<%# Eval ( "Model" ) %>' />
            </itemtemplate>
         </asp:templatefield>

         <asp:boundfield headertext="Avg. Cost To Build"
            datafield="Cost"
            htmlencode=false
            dataformatstring="{0:c}"
            itemstyle-horizontalalign="right" />
            
      </columns>

   </asp:gridview>

   <asp:accessdatasource id="planTypes" runat="server"
      datafile="~/app_data/plans.mdb"
      selectcommand="SELECT DISTINCT Type FROM Plans WHERE not Type=''"
      datasourcemode="DataReader" />

   <asp:accessdatasource id="plans" runat="server"
      datafile="~/app_data/plans.mdb"
      selectcommand="SELECT Type, PlanID, Model, Cost FROM Plans"
      filterexpression="Type='{0}'">

      <filterparameters>
         <asp:controlparameter controlid="typesSelect" propertyname="SelectedValue" />
      </filterparameters>

   </asp:accessdatasource>

</asp:panel>

<asp:panel id="detailsPanel" visible=false runat="server">
   <div class="small"><asp:linkbutton onClick="ShowHidePanel" text="Back To List" runat="server" /></div>

   <p>

   <asp:formview id="planDetails" width=95% runat="server">
      <itemtemplate>
         <table width=100%>
         <tr valign="top">
            <td><div class="header"><h3 style="color:maroon"><%# Eval ( "Model" ) %></h2></div></td>
            <td align="right"><div class="header"><h2>Plan # <%# Eval ( "PlanID" ) %></h2></div></td></tr>
         </table>

         <table width=100% cellpadding=10 style="background:ddd; border:2px outset">
         <tr valign="top">
            <td align="center" width=290>
               <img width=290 runat="server" 
                  src='<%# Eval ( "PlanID", "~/shared/images/plans/{0}.jpg" ) %>'
                  alt='<%# Eval ( "Model" ) %>'
                  style="border:1px inset">
               <p><!-- spacer --></p>
               <table width=90% class="data" cellspacing=0 
                  style="font-size:8pt; text-align:center; border:1px inset">
               <tr><th><%# Eval ( "Design" ) %></th></tr>
               <tr><td><%# Eval ( "Area" ) %> ft<sup>2</sup>, <%# Eval ( "Bedrooms" ) %> Bedrooms, <%# Eval ( "Baths" ) %> Baths
                  <p>National Average Cost to Build: <br>
                  <b style="color:maroon"><%# Eval ( "Cost", "{0:c}" ) %></b></td></tr>
               </table>
            </td>
            <td>
               <div class="desc"><%# Eval ( "Description" ) %></div>
               <div class="features"><%# Eval ( "Features" ) %></div>
               <div class="specs"><%# Eval ( "Specs" ) %></div>
            </td></tr>
         </table>
      </itemtemplate>

   </asp:formview>

   <p>

   <div class="small"><asp:linkbutton onClick="ShowHidePanel" text="Back To List" runat="server" /></div>

</asp:panel>

</form>
</div>

<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->

</body>
</html>