jquery - 固定高度的数据列表中的谷歌加图像样式

Question

我正在我的 Asp.net 应用程序中创建一个包含水平和垂直图像的 DataList。我想修复图像的高度，例如 Google Images 搜索结果，并且图片标题的悬停效果。

我的代码是

<asp:DataList ID="dlImages" runat="server" RepeatLayout="Table" RepeatColumns="4"
        CellPadding="2" CellSpacing="20">
        <ItemTemplate>
            <table class="item" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td align="center" class="header">
                        <span class="name">
                            <%# Eval("ItemCode") %></span>
                    </td>
                </tr>
                <tr>
                    <td align="center" class="body">

                          <a target="_blank" href="#">

               <img class="image"  src="/IMAGES/ThumbNail/<%#Eval("ImageFile")%>" /> </a>  
                    </td>
                </tr>

                <tr>
                    <td class="footer" align="center" style="display:none;">

                        <input type="hidden" class="is_used" value="0" />
                    </td>
                </tr>
            </table>
        </ItemTemplate>
    </asp:DataList>

使用 CSS 就足够了，或者为此使用“Jquery”。请帮忙。

Answer 1

只需为 img 指定 auto 的固定高度 width:

img{  height: 200px; width: auto }

这样做，你几乎得到了想要的输出，buf 确切的东西作为谷歌图片页面是想要的，你可以使用 flexbox