考虑CSS中的不同维度图像

Question

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

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

提前干杯，

亚当

Answer 1

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

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

但是你应该知道浏览器缩小或扩展图像的能力相当糟糕。浏览器的工作不仅仅是擅长这一点。您可能需要考虑使用ASP预先调整图像大小，将它们传送到网站空间上的特殊文件夹，该文件夹用于调整大小调整的大小。然后，您的浏览器将始终以最佳质量显示图像，而您无需使用可能并非始终作为最佳解决方案的CSS解决方案。

Answer 2

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

如果您担心图像异常高的可能性或结果（例如，150px宽，1000px高），那么

hurrtz的最大宽度最大高度可能会更好。