0

我有一个评论部分，可以从数据库中加载不同用户的图像。图像被上传到服务器并存储 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>

所以是的，关于我能做什么的任何想法？

提前喝彩，

亚当

4

2 回答 2

2

您可以选择最大宽度和最大高度。

max-width: 150px;
max-height: 120px;

但是您应该知道，您的浏览器缩小或放大图像的能力相当糟糕。这不是浏览器擅长的工作。您可能需要考虑使用 ASP 预先调整图像的大小，将它们传送到您的网站空间上的一个特殊文件夹，该文件夹用于为调整大小的拇指提供服务。然后，您的浏览器将始终以最佳质量显示图像，您不必寻求可能并不总是作为最佳解决方案的 CSS 解决方案。

于 2013-04-04T17:46:43.150 回答
1

为了最大限度地提高浏览器兼容性，只需指定一个维度（可能是宽度，根据您的屏幕截图），图像将缩放到该宽度，同时保持高宽比。

如果您担心图像异常高（例如，150px 宽 x 1000px 高）的可能性或结果，hurrtz 的 max-width max-height 可能会更好。

于 2013-04-04T17:59:54.107 回答