This documentation is archived and is not being maintained.

HtmlImage.Width Property

Gets or sets the width of the image.

[Visual Basic]
Public Property Width As Integer
[C#]
public int Width {get; set;}
[C++]
public: __property int get_Width();
public: __property void set_Width(int);
[JScript]
public function get Width() : int;
public function set Width(int);

Property Value

The width of the image.

Remarks

The Height and Width properties can be used two ways. You can use the Height and Width properties to send the image size specifications to the browser. This displays the Web page faster because the browser does not need to recalculate the positions of elements on the page when the image loads.

You can also use the Height and Width properties to scale the image. When using values that are different from the physical size of the image, the image is resized accordingly. However, this method for scaling the image is not recommended because it takes longer for the page to display. Instead, physically resize the image to the size you need.

By default, the Width property is expressed in pixels, but it can also be expressed as a percentage of the window size.

Example

[Visual Basic, C#, JScript] The following example demonstrates how to use the Width property to programmatically modify the width of the displayed image.

[Visual Basic] 
<%@ Page Language="VB" AutoEventWireup="True" %>

<html>
 <head>
 
    <script language="VB" runat="server">
        
    Sub Button_Click1(sender As Object, e As EventArgs)
        Image1.Height = 500
        Image1.Width = 1000
    End Sub 'Button_Click1


    Sub Button_Click2(sender As Object, e As EventArgs)
        Image1.Height = 226
        Image1.Width = 500
    End Sub 'Button_Click2
 
  </script>
 
 </head>
 
 <body>
 
    <form runat="server">
 
       <h3>HtmlImage Example</h3>
     
       <img id ="Image1"
            Src="image1.jpg"
            Width="500"
            Height="226"
            Alt="Image 1"
            Border="5"
            Align="center" 
            runat=server/>
       <br><br>
       <button id="Button1"
               OnServerClick="Button_Click1"
               runat="server">
       Zoom Image
       </button>
       <button id="Button2"
               OnServerClick="Button_Click2"
               runat="server">
       Normal Size
       </button>
    
    </form>
 
 </body>
 </html>


[C#] 
<%@ Page Language="C#" AutoEventWireup="True" %>

<html>
 <head>
 
    <script language="C#" runat="server">
        
       void Button_Click1(object sender, EventArgs e) 
       {
          Image1.Height=500;
          Image1.Width=1000;
       }
    
       void Button_Click2(object sender, EventArgs e) 
       {
          Image1.Height=226;
          Image1.Width=500;
       }
 
    </script>
 
 </head>
 
 <body>
 
    <form runat="server">
 
       <h3>HtmlImage Example</h3>
     
       <img id ="Image1"
            Src="image1.jpg"
            Width="500"
            Height="226"
            Alt="Image 1"
            Border="5"
            Align="center" 
            runat=server/>
       <br><br>
       <button id="Button1"
               OnServerClick="Button_Click1"
               runat="server">
       Zoom Image
       </button>
       <button id="Button2"
               OnServerClick="Button_Click2"
               runat="server">
       Normal Size
       </button>
    
    </form>
 
 </body>
 </html>


[JScript] 
<%@ Page Language="JScript" AutoEventWireup="True" %>

<html>
 <head>
 
    <script language="JSCRIPT" runat="server">
        
    function Button_Click1(sender : Object, e : EventArgs){
        Image1.Height = 500
        Image1.Width = 1000
    }

    function Button_Click2(sender : Object, e : EventArgs){
        Image1.Height = 226
        Image1.Width = 500
    }
 
  </script>
 
 </head>
 
 <body>
 
    <form runat="server">
 
       <h3>HtmlImage Example</h3>
     
       <img id ="Image1"
            Src="image1.jpg"
            Width="500"
            Height="226"
            Alt="Image 1"
            Border="5"
            Align="center" 
            runat=server/>
       <br><br>
       <button id="Button1"
               OnServerClick="Button_Click1"
               runat="server">
       Zoom Image
       </button>
       <button id="Button2"
               OnServerClick="Button_Click2"
               runat="server">
       Normal Size
       </button>
    
    </form>
 
 </body>
 </html>

[C++] No example is available for C++. To view a Visual Basic, C#, or JScript example, click the Language Filter button Language Filter in the upper-left corner of the page.

Requirements

Platforms: Windows 98, Windows NT 4.0, Windows Millennium Edition, Windows 2000, Windows XP Home Edition, Windows XP Professional, Windows Server 2003 family

See Also

HtmlImage Class | HtmlImage Members | System.Web.UI.HtmlControls Namespace | Height

Show: