实现一个按比例缩放的Image服务器控件

来源:互联网 发布:类似海报拼图软件 编辑:程序博客网 时间:2024/05/15 13:51
有时候我们需要实现一个按比例缩放的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
="Water lilies.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,效果如下:

源文件下载
原创粉丝点击