图片宽度问题css

[mizuho_2006]

在一个table里
其中一行
<tr> <td style="width:25%">内容</td><td style="width:75%">内容</td></tr>

在第二个单元格中插入一个图片，图片比较宽，75%的宽度根本不够，于是就把前面一个单元格挤扁了。我希望的效果是图片超出td范围的就隐藏显示。请问应该如何设置css？
我设置td的样式overflow:hidden 不管用。

[shuanghanyandan]

设置width="100%"这样会等比例的显示，或者你直接把图片p掉一部分。

[youyoufangyuan]

我试了下table-layout:fixed; 是可行的 ，楼主你还得把你的代码贴出来具体问题具体分析~~

[mizuho_2006]

我做的是一个留言本，用户可以自己插入图片。我如果设置img的style为width:100%，那用户插入的所以图片都会宽度按父容器的100%显示。。

我只想让用户插入的太大的图片可以自适应父容器大小，或者隐藏多余的部分也可以。

另外，用户输入文字标题太长的话，也会把第一个td给挤扁。。怎么设置呀

[mizuho_2006]

<asp:DataGrid ID="dgBook" runat="server" AutoGenerateColumns="False" GridLines="None"  Width="100%" DataSourceID="ObjectDataSourceThreadInfo" ShowHeader="false" OnItemDataBound="dgBook_ItemDataBound" >
                     <Columns>
                      <asp:TemplateColumn>
                        <ItemTemplate>
                        <table cellpadding="0" cellspacing="0" width="100%">
                         <tr>
                         <td style="text-align:left;background:#E5EDF2">查看：<%#Eval("readcount") %></td>
                         <td style="text-align:left;font-size:13pt;font-weight:bold;background:#F7F7F7">[<%# DataBinder.Eval(Container.DataItem, "ClassType")%>]<%# DataBinder.Eval(Container.DataItem, "Title")%></td>
                         </tr>
                        
                         <tr style="height:10px">
                         <td style="background:#C2D5E3"> 
                         </td>
                         <td style="background:#E5EDF2"></td>
                         </tr>

                         <tr>
                         <td style="text-align:center;background:#E5EDF2;border-bottom:1px dashed #CDCDCD"><a href="mailto:<%# Eval("email") %>"><%# DataBinder.Eval(Container.DataItem, "Author")%></a></td>
                         <td style="text-align:left;background:#F7F7F7;border-bottom:1px dashed #CDCDCD">发表于：<%# DataBinder.Eval(Container.DataItem, "PostTime")%>  <span runat="server" id="spanPost"></span></td>
                         </tr>
                         <tr>
                         <td style="text-align:center;background:#E5EDF2;width:25%;">
                         <img border="0" height="77" src="./img/face/<%# Eval("faceurl") %>.gif" width="77"/>
                         <br />
                         <br />
                         注册时间：<%# DataBinder.Eval(Container.DataItem, "registertime").ToString().Substring(0,10)%><br />发表信件：<%=strMyCount%>
                         </td>

                         <td style="text-align:left;background:#F7F7F7">  <%# Utils.OutCheckStr(UCode.UBB(DataBinder.Eval(Container.DataItem, "Content").ToString()))%></td>
                         </tr>

                         <tr>
                         <td style="background:#E5EDF2"> 
                         </td>
                         <td style="background:#F7F7F7;border-top:1px dashed #CDCDCD;text-align:right">
                            <div id="userOpration">
                              <a href="post.aspx?action=edit&uname=<%=Session["username"] == null ? "" : Session["username"].ToString() %>&threadid=<%=strThreadID %>" id="userEdit"><img src="img/text_edit.png" />编辑</a>
                                  
                              <a href="#" id="userDelete"><img src="img/delete.png" />删除</a>
                            </div>
                         </td>
                         </tr>

                         <tr style="height:10px">
                         <td style="background:#C2D5E3"> 
                         </td>
                         <td style="background:#E5EDF2"></td>
                         </tr>

                         <tr>
                         <td style="background:#E5EDF2"></td>
                         <td style="text-align:left;font-size:13pt;font-weight:bold;background:#F7F7F7"></td>
                         </tr> 

                        </table>
                        </ItemTemplate>
                      </asp:TemplateColumn>
                     </Columns>
                    </asp:DataGrid>

具体是这块代码

                         <td style="text-align:center;background:#E5EDF2;width:25%;">
                         <img border="0" height="77" src="./img/face/<%# Eval("faceurl") %>.gif" width="77"/>
                         <br />
                         <br />
                         注册时间：<%# DataBinder.Eval(Container.DataItem, "registertime").ToString().Substring(0,10)%><br />发表信件：<%=strMyCount%>
                         </td>

                         <td style="text-align:left;background:#F7F7F7">  <%# Utils.OutCheckStr(UCode.UBB(DataBinder.Eval(Container.DataItem, "Content").ToString()))%></td>

[mizuho_2006]

我做的是一个留言本，用户可以自己插入图片。我如果设置img的style为width:100%，那用户插入的所以图片都会宽度按父容器的100%显示。。

我只想让用户插入的太大的图片可以自适应父容器大小，或者隐藏多余的部分也可以。

另外，用户输入文字标题太长的话，也会把第一个td给挤扁。。怎么设置呀

[wii_ag]

我是楼主，补充一下

<%# DataBinder.Eval(Container.DataItem, "registertime").ToString().Substring(0,10)%>

这段代码可以读取数据库中的UBB代码并转换为html代码，其中就包含了那张很大的图片的代码。
第一个td里放的是用户的头像，不是用户的留言内容。

[chenyan19890623]

看似简单的问题却这么高深了！昏头了~~~

[不断学习的ITer]

设置图片的 width="100%" 就可以解决你的问题

[Go 旅城通票]

<style>
td.content img{width:100%;}/*前提是img没有style属性设置过width，这样可以等比缩放图片*/
</style>
<td style="width:75%" class="content">

[mizuho_2006]

请高手指点

[Go 旅城通票]

td指定一个高度，overflow:hidden，IE下强制换行可以使用word-break:break-all

<tr> <td style="width:25%">内容</td><td style="width:75%;height:300px;overflow:hidden;word-break:break-all">内容</td></tr>

[hailhua]

		<table style="table-layout:fixed;width:100%;border:1px;">
			<tr>
				<td width="95%">
				  123
				</td>
			</tr>
			<tr>
				<td width="95%">
				  0123456789012345678901234567890123456789012345678901234567890
				</td>
				<td style="width:5%;overflow:hidden;">
					1234567890
					<img width="280px" height="200px" src="img01.jpg" />
					1234567890
				</td>
			</tr>
			<tr>
				<td width=95%">
				  123
				</td>
				<td width="5%">
					123
				</td>
			</tr>
		</table>

以上代码你试试，是不是符合你所说的

[hailhua]

晕 贴错了 再贴

		<table style="table-layout:fixed;width:100%;border:1px;">
			<tr>
				<td width="95%">
				  123
				</td>
				<td width="5%">
				  123
				</td>
			</tr>
			<tr>
				<td width="95%">
				  0123456789012345678901234567890123456789012345678901234567890
				</td>
				<td style="width:5%;overflow:hidden;">
					1234567890
					<img width="280px" height="200px" src="r_rt_2.jpg" />
					1234567890
				</td>
			</tr>
			<tr>
				<td width=95%">
				  123
				</td>
				<td width="5%">
					123
				</td>
			</tr>
		</table>

[mizuho_2006]

word-break 提示不是已知的CSS属性名
没有看到效果。。

而且也不能限制高度的，因为用户如果发帖内容很多，不能把高度固定死，内容隐藏掉啊。

[__phoenix]

可以让图片的大小去适应单元格的大小，<img width="xx" ……> have try……

[hailhua]

最好把代码贴出来，这样大家才会把你的问题集中到真实的问题上

[mizuho_2006]

用了20L的代码还是不行。。

[deiphi]

最安全的做法，加个div包住图片就行了，然后div设置width:100%;overflow:hidden;

[hailhua]

[Quote=引用 18 楼 的回复:]
最好把代码贴出来，这样大家才会把你的问题集中到真实的问题上
[/Quote]

唉，你认为没有问题的地方恰恰藏着问题

[mizuho_2006]

用max-width属性解决了。谢谢大家