有時(shí)候我們需要實(shí)現(xiàn)一個(gè)按比例縮放的Image控件，因?yàn)樵赪eb上的<image> 當(dāng)設(shè)定了寬度和高度的時(shí)候，如果圖片本身的長寬比跟它倆的比值不一樣，那么圖片就變形了。
下面的這個(gè)控件派生于System.Web.UI.WebControls.Image，它重寫了RenderBeginTag、AddAttributesToRender和RenderEndTag方法，使Image呈現(xiàn)成一個(gè)DIV，DIV里面包一個(gè)跟實(shí)際圖片比例完全相同的Image，變相地實(shí)現(xiàn)了一個(gè)按比例縮放的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"
/>
呈現(xiàn)的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，但I(xiàn)mage的寬度為400×600,效果如下：
源文件 下載
下面的這個(gè)控件派生于System.Web.UI.WebControls.Image，它重寫了RenderBeginTag、AddAttributesToRender和RenderEndTag方法，使Image呈現(xiàn)成一個(gè)DIV，DIV里面包一個(gè)跟實(shí)際圖片比例完全相同的Image，變相地實(shí)現(xiàn)了一個(gè)按比例縮放的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
>
源文件 下載
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
