Jquery 固定高度的数据列表中的Google plus图像样式

我正在我的

Asp.net

应用程序中创建一个带有水平和垂直图像的

DataList

。我想固定图像的高度，比如谷歌图像搜索结果，以及图像标题的悬停效果

我的代码是

<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'就够了。请帮助。

只需使用

自动
为
宽度
指定
img
的固定高度即可：

img{  height: 200px; width: auto }

这样做，您几乎可以获得所需的输出，但如果确实需要google图像页面，您可以使用它，因为您应该管理它以满足您自己的需要。如果简单的答案是可以的，只需删除
表
，并使用提供的
css
简单地浮动
img
s即可。否则google for
flexbox
好的，但是悬停效果呢……我没有为图像创建悬停效果，但宽度灵活。简单地说，我还想在特定图像上显示图像标题@Trix已经发明。哇，谢谢你关于悬停状态问题的建议。