0

データベースからさまざまなユーザーの画像を読み込むコメント セクションがあります。画像はサーバーにアップロードされ、元のサイズの 100% で保存されます (この Web サイトは単なるテスト プロジェクトであるため、これは気にしません)。

コメント ボックスに画像を表示する際に問題が発生しています。画像の元の比率を維持したいのですが、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 と max-height に行くことができます。

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

ただし、画像を縮小または拡大するブラウザの機能はかなり悪いことを知っておく必要があります。それが得意なのはブラウザの仕事ではありません。ASP を使用して、事前に画像のサイズを変更し、サイズ変更されたサムを提供するためにそこにある Web スペース上の特別なフォルダーに画像を配信することを検討することをお勧めします。そうすれば、ブラウザは常に最高の品質で画像を表示し、常に最適なソリューションとして機能するとは限らない CSS ソリューションを使用する必要はありません。

于 2013-04-04T17:46:43.150 に答える
1

ブラウザーの互換性を最大化するには、1 つの寸法 (スクリーンショットによるとおそらく幅) のみを指定すると、高さと幅の比率を維持しながら、画像がその幅にスケーリングされます。

hurrtz の max-width max-height は、画像が異常に高くなる可能性やその結果 (たとえば、幅 150 ピクセル、高さ 1000 ピクセル) が懸念される場合に適しています。

于 2013-04-04T17:59:54.107 に答える