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