我有一个评论部分,可以从数据库中加载不同用户的图像。图像被上传到服务器并存储 100% 的原始大小(我不关心这个,因为这个网站只是一个测试项目)。
在评论框中显示图像时遇到问题 - 我希望图像保留其原始比例,但我正在使用 CSS 来调整所有用户头像的大小,以便它们很好地适合评论部分。
这是我的问题的屏幕截图(假设用户可以上传自己的纵向图像,而我的 CSS 会导致它看起来很糟糕):
CSS:
/* ROUNDED AVATARS */ .avatar-frame{border: 2px solid #c7b89e;} .avatar-frame,.avatar-frame img{ width: 150px; height: 120px; -webkit-border-radius: 30px; /* Saf3+, Chrome */ border-radius: 30px; /* Opera 10.5, IE 9 */ /* -moz-border-radius: 30px; Disabled for FF1+*/ }
我已经尝试使用 50% 作为图像的宽度和高度,但是对于每个特色图像来说这肯定会有所不同吗?
ASP:
<%-- Comments Box --%> <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" DataSourceID="CommentsDataSource" Height="167px" Width="325px"> <Columns> <asp:TemplateField HeaderText="Comments"> <ItemTemplate> <table> <tbody> <tr> <td rowspan="3"><div class="avatar-frame"><asp:Image ID="Image1" CssClass="templateimagefield" NullImageUrl="~/img/no_image.jpg" runat="server" ImageUrl='<%# Eval("AvatarURL","~/Account/{0}")%>'/></div> </td> <td><h2><%# Eval("BookCommenter")%></h2></td> </tr> <tr> <td><h2><%# Eval("TagLine")%></h2></td> </tr> <tr> <td><%# Eval("CommentBody")%></td> </tr> </tbody> </table> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView>
所以是的,关于我能做什么的任何想法?
提前喝彩,
亚当