다음을 통해 공유


HtmlImage.Width 속성

정의

이미지의 너비를 가져오거나 설정합니다.

public:
 property int Width { int get(); void set(int value); };
public int Width { get; set; }
member this.Width : int with get, set
Public Property Width As Integer

속성 값

이미지의 너비입니다.

예제

다음 코드 예제에서는 속성을 사용 하 여 Width 프로그래밍 방식으로 표시 된 이미지의 너비를 수정 하는 방법을 보여 줍니다.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
 <head>
    <title>HtmlImage Example</title>
<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 id="form1" runat="server">
 
       <h3>HtmlImage Example</h3>
     
       <img id ="Image1"
            src="Image1.jpg"
            alt="Image 1"
            runat="server"
            style="width:500; height:226; border:5; text-align:center" />
       <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>
<%@ Page Language="VB" AutoEventWireup="True" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
 <head>
    <title>HtmlImage Example</title>
<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 id="form1" runat="server">
 
       <h3>HtmlImage Example</h3>
     
       <img id ="Image1"
            src="Image1.jpg"
            alt="Image 1"
            runat="server"
            style="width:500; height:226; border:5; text-align:center" />
       <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>

설명

Width 속성은 Height 두 가지 방법으로 사용할 수 있습니다. 및 Width 속성을 사용하여 Height 이미지 크기 사양을 브라우저로 보낼 수 있습니다. 이렇게 하면 이미지를 로드할 때 브라우저에서 페이지의 요소 위치를 다시 계산할 필요가 없으므로 웹 페이지가 더 빠르게 표시됩니다.

Width 속성을 사용하여 Height 이미지 크기를 조정할 수도 있습니다. 이미지의 실제 크기와 다른 값을 사용하는 경우 이미지의 크기가 그에 따라 조정됩니다. 그러나 이미지를 표시하는 데 시간이 오래 걸리기 때문에 이미지 크기를 조정하는 방법은 권장되지 않습니다. 대신 필요한 크기로 이미지 크기를 물리적으로 조정합니다.

기본적으로 Width 속성은 픽셀 단위로 표현되지만 창 크기의 백분율로 표시될 수도 있습니다.

적용 대상

추가 정보