在CSS中考慮不同尺寸圖像

我有一個評論部分，可以從數據庫加載不同用戶的圖像。圖像上傳到服務器，並保存其原始大小的100％（我不關心這個，因爲這個網站只是一個測試項目）。在CSS中考慮不同尺寸圖像

我在評論框中顯示圖像時遇到了問題 - 我希望圖像保留其原始比例，但我使用CSS來全屏調整所有用戶頭像的大小，以便它們很好地適合評論部分。

這裏是我的問題的屏幕截圖（想象一下，一個用戶可以上傳自己的形象，是在縱向和我的CSS會導致它看起來可怕）：

screenshot of problem

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％的圖像的寬度和高度嘗試，但是這將是對於每個不同IMAG e特色肯定？

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>

所以，是什麼我可以做任何想法？

乾杯提前，

亞當

來源

2013-04-04 adaam

你爲什麼使用表格？ – 2013-04-04 17:39:46

只需使用它們作爲構建我的評論部分的一種懶惰方式 – adaam 2013-04-04 18:03:28

要最大化瀏覽器兼容性，只需指定一個尺寸（可能根據屏幕截圖的寬度），並且圖像將在保持高寬比的同時縮放到該寬度。

如果您擔心圖像異常高的可能性或結果（例如150px寬×1000px高），hurrtz的最大寬度max-height可能會更好。

來源

2013-04-04 17:59:54 thelr

你可以去最大寬度和最大高度。

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

但是你應該知道，瀏覽器縮小或擴大圖像的能力相當差。這不是瀏覽器的職責。您可能需要考慮使用ASP預先調整圖像大小，將它們傳送到您的網絡空間中的特殊文件夾，以便用於縮放大拇指。然後，您的瀏覽器將始終以最佳質量顯示圖像，而且您不必爲CSS解決方案尋找最佳解決方案。

來源

2013-04-04 17:46:43 hurrtz

在CSS中考慮不同尺寸圖像

回答

相關問題