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

本文介绍了一种实现Web上图片按比例缩放的方法,通过重写Image控件的几个方法,使其在设定宽度和高度时保持图片原始的比例,避免图片变形。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

有时候我们需要实现一个按比例缩放的Image控件,因为在Web上的<image> 当设定了宽度和高度的时候,如果图片本身的长宽比跟它俩的比值不一样,那么图片就变形了。
下面的这个控件派生于System.Web.UI.WebControls.Image,它重写了RenderBeginTag、AddAttributesToRender和RenderEndTag方法,使Image呈现成一个DIV,DIV里面包一个跟实际图片比例完全相同的Image,变相地实现了一个按比例缩放的Image。
使用:
ExpandedBlockStart.gif ContractedBlock.gif < style > dot.gif
InBlock.gif.imagecss
ExpandedSubBlockStart.gifContractedSubBlock.gif
{dot.gif}{
InBlock.gifbackground-color
:#D7CEE9;
ExpandedSubBlockEnd.gif
}

ExpandedBlockEnd.gif
</ style >
None.gif
< cc1:AutoSizeImageControl ID ="AutoSizeImageControl1"
None.gifDivCSS
="imagecss"
None.gifAlign
="center"
None.gifVAlign
="middle"
None.gifWidth
="400"
None.gifHeight
="600"
None.gifIsAutoZoom
="true"
None.gifImageUrl
="Waterlilies.jpg"
None.gifrunat
="server" />
呈现的HTML
None.gif < div class ="imagecss" align ="center" style ="TABLE-LAYOUT:fixed;width:400px;height:600px;TEXT-OVERFLOW:ellipsis;" >
None.gif
< img id ="AutoSizeImageControl1" src ="Water%20lilies.jpg" style ="height:300px;width:400px;border-width:0px;padding-top:150px" /></ div >
图片的原始大小为 300×400,但Image的宽度为400×600,效果如下:
Image00007.jpg
源文件下载
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值