Question

ASP.NET中gridview里的imagefield绑定列怎么控制图片的大小

我想在一个gridview里面显示张图片。。可是这个图片太大了。显示出来的是个真实大小。。我想把它缩小到自己喜欢的尺寸。。怎么处理。
教教小弟
//页面代码
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Height="277px"
Width="714px">
<Columns>
<asp:BoundField DataField="messID" />
<asp:BoundField DataField="messTypeName" />
<asp:BoundField DataField="messTitle" />
<asp:BoundField DataField="messBody" />
<asp:BoundField DataField="MessDate" />
<asp:BoundField DataField="Author" />
<asp:ImageField DataImageUrlField="messimg">
</asp:ImageField>
</Columns>
</asp:GridView>

//代码文件
protected void Page_Load(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection("server=.;database=OverFly_DB;uid=sa;pwd=sa;");
try
{
SqlDataAdapter adapter = new SqlDataAdapter("select * from Tbl_bodyMessage", con);
DataSet ds = new DataSet();
adapter.Fill(ds);
this.GridView1.DataSource = ds;
this.DataBind();
}
catch (Exception)
{

throw;
}
finally {
con.Close();
}
}

Answer 1

我有一段代码更人性化，
（通常完全固定大小，如120X90那么大于此尺寸的图像达到了这种要求，但是小于它的图像就拉大变形了，我的方法能解决这两个问题）

做法如下：
1 选中GridView编辑列，选中图像，将已经设好它的宽度及高度值去掉，比如下代码：
<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("pphotoxiao") %>'/>

2 在cs代码文件里的page_load()加入：
((Image)(this.GridView1.Rows[0].FindControl("Image1"))

).Attributes.Add("onload", "if(this.offsetWidth>120)this.width=120;this.height=90");

解决了实用问题，给点分奖励一下哈，谢谢！

Answer 2

     <asp:ImageField DataImageUrlField="jin_pass" HeaderText="t" ControlStyle-Height="300px" ControlStyle-Width="100px" >

　　上面这句就完全控制了图片大小，关键属性为：

　　ControlStyle-Height="300px"

　　ControlStyle-Width="100px"

　　步骤：点击GridView设计页面小三角-添加新列-选择字段类型ImageField-填写列名-填写数据库绑定的字段名-确定即可　　

　　当然我们还可以把列转换为模板列，然后拖入进去一个图片控件，这样更灵活，但是代码处理难度就增大了。

Answer 3

通常用的方法是这样的:
在bound事件里加上代码:
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
System.Web.UI.WebControls.Image img = (System.Web.UI.WebControls.Image)e.Row.Cells[0].FindControl("Image2");
img.Width = 80;
img.Height = 60;
img.Attributes.Add("onmouseover", "return overImage();");

}
}
aspx页面添加:
<script type="text/javascript">
function overImage()
{
var index= window.event.srcElement.parentElement.parentElement.rowIndex;
var dg=document.getElementById('<%= GridView1.ClientID %>');
var img=dg.rows[index].cells[0].getElementsByTagName("img")[0];
// alert( dg.rows[index].cells[0].outerHTML)
img.style.posWidth=500;
img.style.posHeigth=400;
}
</script>
同理,也可以写个onmouseover的对应事件,妈的忘了叫什么来的,你可以查得到的.

Answer 4

在<asp:ImageField DataImageUrlField="messimg">
</asp:ImageField>
中加一段代码变成
<asp:ImageField DataImageUrlField="messimg">
<ItemStyle Height="50px" Width="50px" />
</asp:ImageField>
改成你想要的高度和宽度就OK了。