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

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

这里是什么样子：

这里是我的代码：

<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> 

}

来源

2015-07-04 mjmendes

嗨伙计，我认为你可以在不同的包装分离让他们（DIV ），然后相应地应用相应的CSS你的使用这将变得容易，如果你提供了jsfiddle，那么我会尽力解决你的问题 –