有时候我们需要实现一个按比例缩放的Image控件，因为在Web上的<image> 当设定了宽度和高度的时候，如果图片本身的长宽比跟它俩的比值不一样，那么图片就变形了。
下面的这个控件派生于System.Web.UI.WebControls.Image，它重写了RenderBeginTag、AddAttributesToRender和RenderEndTag方法，使Image呈现成一个DIV，DIV里面包一个跟实际图片比例完全相同的Image，变相地实现了一个按比例缩放的Image。
使用：
<
style
>
.imagecss
{
background-color
:
#D7CEE9
;
}
</
style
>
<
cc1:AutoSizeImageControl
ID
="AutoSizeImageControl1"
DivCSS
="imagecss"
Align
="center"
VAlign
="middle"
Width
="400"
Height
="600"
IsAutoZoom
="true"
ImageUrl
="Waterlilies.jpg"
runat
="server"
/>
呈现的HTML
<
div
class
="imagecss"
align
="center"
style
="TABLE-LAYOUT:fixed;width:400px;height:600px;TEXT-OVERFLOW:ellipsis;"
>
<
img
id
="AutoSizeImageControl1"
src
="Water%20lilies.jpg"
style
="height:300px;width:400px;border-width:0px;padding-top:150px"
/></
div
>
图片的原始大小为 300×400，但Image的宽度为400×600,效果如下：
源文件 下载
下面的这个控件派生于System.Web.UI.WebControls.Image，它重写了RenderBeginTag、AddAttributesToRender和RenderEndTag方法，使Image呈现成一个DIV，DIV里面包一个跟实际图片比例完全相同的Image，变相地实现了一个按比例缩放的Image。
使用：
<
style
>
.imagecss
{
background-color
:
#D7CEE9
;
}
</
style
>
<
cc1:AutoSizeImageControl
ID
="AutoSizeImageControl1"
DivCSS
="imagecss"
Align
="center"
VAlign
="middle"
Width
="400"
Height
="600"
IsAutoZoom
="true"
ImageUrl
="Waterlilies.jpg"
runat
="server"
/>
<
div
class
="imagecss"
align
="center"
style
="TABLE-LAYOUT:fixed;width:400px;height:600px;TEXT-OVERFLOW:ellipsis;"
>
<
img
id
="AutoSizeImageControl1"
src
="Water%20lilies.jpg"
style
="height:300px;width:400px;border-width:0px;padding-top:150px"
/></
div
>
源文件 下载
