使用 jquery 调整 gridview 的图像大小

Question

我是 jquery 的新手，被困在某个地方。我有一个gridview，里面有一个图像列。尝试调整这些图像的大小，但真的无法弄清楚。尝试了这段代码，当图像不在网格视图中时它运行良好，但就像我说的我需要在网格视图中解决它。

这是我的网格：

<asp:GridView ID="GridViewFuel" AutoGenerateColumns="false" CssClass="mGrid" runat="server" DataSourceID="EntityDataSourceFuels">
    <Columns>
        <asp:TemplateField HeaderText="Sürücü">
            <ItemTemplate>
                <%#GetDriverNameAndSurname(Convert.ToInt16(Eval("DriverId"))) %>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Araç">
            <ItemTemplate>
                <%#GetCarPlate(Convert.ToInt16(Eval("CarId"))) %>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Fiş">
            <ItemTemplate>
                <asp:Image ID="Image1" ImageUrl='<%#Eval("FuelPrice") %>' runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

这是我的 jquery：

$(document).ready(function () {
        $('.mGrid img').each(function () {
            var maxWidth = 151; // Max width for the image
            var maxHeight = 151;    // Max height for the image
            var ratio = 0;  // Used for aspect ratio
            var width = $(this).width();    // Current image width
            var height = $(this).height();  // Current image height

            // Check if the current width is larger than the max
            if (width > maxWidth) {
                ratio = maxWidth / width;   // get ratio for scaling image
                $(this).css("width", maxWidth); // Set new width
                $(this).css("height", height * ratio);  // Scale height based on ratio
                height = height * ratio;    // Reset height to match scaled image
                width = width * ratio;    // Reset width to match scaled image
            }

            // Check if current height is larger than max
            if (height > maxHeight) {
                ratio = maxHeight / height; // get ratio for scaling image
                $(this).css("height", maxHeight);   // Set new height
                $(this).css("width", width * ratio);    // Scale width based on ratio
                width = width * ratio;    // Reset width to match scaled image
            }
        });
    });

如何使它与我的 gridview 一起工作？

Answer 1

我会尝试遍历每个单元格。如果存在图像，则按比例计算。

$('.mGrid tr').each(function () {

$('td', this).each(function () {

    //check if image exists

 });

})