您的位置: 首页  >  文章  >  实现一个按比例缩放的Image服务器控件

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

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

相关推荐