根据表格大小调整图像大小

Question

我试图在图片上放置一张桌子，但我遇到了问题。表的内容是动态的，我需要能够使这个图像的高度适合表的大小。

以下是它的样子：

这是我的代码：

<div style="position:relative;margin-top:20px;">
<img style="position:relative; max-height:100%;max-width:100%" src="~/Content/Images/menu13.jpg">
@using (Html.BeginForm("order", "menu", "post"))
{

    <table style="position:absolute;top:102px;left:110px;color:white;  font-family:'Century Gothic'; font-size:16px;" class="">

        <tr>

            <th style="width:150px;">Day</th>
            <th style="width:150px;">Meal</th>
            <th class="text-center">Normal</th>
            <th style="width:100px;"></th>
            <th class="text-center">No carb</th>
        </tr>

        <tr>
            <th></th>
            <th></th>
            <th style="width:240px;" class="text-center">
                <div class="row">
                    <div class="col-md-4">
                        Kiddies
                    </div>
                    <div class="col-md-4">
                        Standard
                    </div>
                    <div class="col-md-4">
                        Large
                    </div>
                </div>
            </th>

            <th></th>

            <th style="width:240px;" class="text-center">
                <div class="row">
                    <div class="col-md-4">
                        Kiddies
                    </div>
                    <div class="col-md-4">
                        Standard
                    </div>
                    <div class="col-md-4">
                        Large
                    </div>
                </div>
            </th>
        </tr>
        @{


    for (int i = 0; i < 5; i++)//foreach day in the week
    {

        string size = "";
        string type = "";
        <tr>
            <td style="vertical-align:top;">@Model.Menu[i].Day</td>

            <td>
                <b>@Model.Menu[i].NormalMeal</b>
                <br />
                <p>@Model.Menu[i].Description</p>
                <p><b>@Model.Menu[i].LowMeal</b></p>
            </td>

            @for (int p = 0; p < 2; p++) //for normal and nocarb
            {
                if (p == 0)
                {
                    type = "normal";
                }
                else
                {
                    type = "nocarb";
                }
                if (p == 1)
                {
                    <td></td>
                }
                <td class="text-center">

                    <div class="row">
                        @for (int j = 0; j < 3; j++) //the sizes
                        {
                            if (j == 0)
                            {
                                size = "kid";
                            }
                            else if (j == 1)
                            {
                                size = "standard";
                            }
                            else
                            {
                                size = "large";
                            }
                            <div class="col-md-4">
                                <select style="position:relative;top:0px; font-size:12px;" name="@(Model.Menu[i].Day.ToLower().ToString() + "_"+type+"_" + size)" @if(i<=disabledDays){ @disabled}>
                                    <option> </option>
                                    @for (int k = 1; k <= 10; k++)
                                    {
                                        <option>@k</option>
                                    }
                                </select>
                            </div>
                        }

                    </div>
                </td>
            }


        </tr>
            <tr>
                <td colspan="6">
                    <hr />
                </td>
            </tr>
    }
        }

    </table>

}

Answer 1

一种解决方案是将其分成三个图像，如下所示：

然后，在<thead>和<tfoot>上使用顶部和底部作为非重复背景，中间切片作为<tbody>上的重复背景。

根据您的浏览器兼容性要求，您还可以将所有三个背景堆叠在一个元素上（例如顶级<table>元素）：http://caniuse.com/#feat=multibackgrounds