有時候我們需要實現一個按比例縮放的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
="Waterlilies.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,效果如下：
源文件 下載
下面的這個控件派生于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
="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
>
源文件 下載
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
