html - 缩放/裁剪图像以适应尺寸未知的容器高度？

Question

两个并排的 div，未知高度，50% 宽度。在右边的 div 中，一个图像。必须始终适合左侧 div 高度，最终:

• 如果更高:缩放
• 如果更短:缩放以适合高度并向左/向右裁剪(无拉伸(stretch))。

JsFiddle here

请不要有背景图片!

#main {
  width: 100%;
}
.left {
  float: left;
}
.inner {
  width: 50%;
}

<div id="main">
  <div class="inner left">
    <table border="1" cellspacing="0" cellpadding="0">
      <tbody>
        <tr>
          <td width="877" colspan="2" valign="top">
            <p align="center">
              <strong>2016-2017</strong>
            </p>
          </td>
        </tr>
        <tr>
          <td width="242" valign="top">
            <p>
              Nursery
            </p>
          </td>
          <td width="635" valign="top">
            <p align="center">
              Jan 1<sup>st</sup> 2014 – Dec 31<sup>st</sup> 2014
            </p>
          </td>
        </tr>
        <tr>
          <td width="242" valign="top">
            <p>
              Preschool
            </p>
          </td>
          <td width="635" valign="top">
            <p align="center">
              Jan 1<sup>st</sup> 2013 - Dec 31<sup>st</sup> 2013
            </p>
          </td>
        </tr>
        <tr>
          <td width="242" valign="top">
            <p>
              Reception
            </p>
          </td>
          <td width="635" valign="top">
            <p align="center">
              Jan 1<sup>st</sup> 2012 - Dec 31<sup>st</sup> 2012
            </p>
          </td>
        </tr>
        <tr>
          <td width="242" valign="top">
            <p>
              Year 1
            </p>
          </td>
          <td width="635" valign="top">
            <p align="center">
              Jan 1<sup>st</sup> 2011 - Dec 31<sup>st</sup> 2011
            </p>
          </td>
        </tr>
        <tr>
          <td width="242" valign="top">
            <p>
              Year 2
            </p>
          </td>
          <td width="635" valign="top">
            <p align="center">
              Jan 1<sup>st</sup> 2010 - Dec 31<sup>st</sup> 2010
            </p>
          </td>
        </tr>
        <tr>
          <td width="242" valign="top">
            <p>
              Year 3
            </p>
          </td>
          <td width="635" valign="top">
            <p align="center">
              Jan 1<sup>st</sup> 2009 - Dec 31<sup>st</sup> 2009
            </p>
          </td>
        </tr>
        <tr>
          <td width="242" valign="top">
            <p>
              Year 4
            </p>
          </td>
          <td width="635" valign="top">
            <p align="center">
              Jan 1<sup>st</sup> 2008 - Dec 31<sup>st</sup> 2008
            </p>
          </td>
        </tr>
        <tr>
          <td width="242" valign="top">
            <p>
              Year 5
            </p>
          </td>
          <td width="635" valign="top">
            <p align="center">
              Jan 1<sup>st</sup> 2007 - Dec 31<sup>st</sup> 2007
            </p>
          </td>
        </tr>
        <tr>
          <td width="242" valign="top">
            <p>
              Year 6
            </p>
          </td>
          <td width="635" valign="top">
            <p align="center">
              Jan 1<sup>st</sup> 2006 - Dec 31<sup>st</sup> 2006
            </p>
          </td>
        </tr>
        <tr>
          <td width="242" valign="top">
            <p>
              Year 7
            </p>
          </td>
          <td width="635" valign="top">
            <p align="center">
              Jan 1<sup>st</sup> 2005 - Dec 31<sup>st</sup> 2005
            </p>
          </td>
        </tr>
        <tr>
          <td width="242" valign="top">
            <p>
              Year 8
            </p>
          </td>
          <td width="635" valign="top">
            <p align="center">
              Jan 1<sup>st</sup> 2004 - Dec 31<sup>st</sup> 2004
            </p>
          </td>
        </tr>
        <tr>
          <td width="242" valign="top">
            <p>
              Year 9
            </p>
          </td>
          <td width="635" valign="top">
            <p align="center">
              Jan 1<sup>st</sup> 2003 - Dec 31<sup>st</sup> 2003
            </p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="inner left">
    <img src="http://f1.biznet-us.com/u_dirs/130/130221/1f33e73d5aabe37a074e3c3cc322d570.jpg" />
  </div>
</div>

Answer 1

恐怕除了使用背景图像(我尝试了几种方法，但图像的高度调整不会以任何其他方式工作)和 flex 之外是不可能的:

https://jsfiddle.net/j4u7hq21/4/

#main {
  width: 100%;
  display: flex;
}
.inner {
  width: 50%;
}
.right {
  background: url("http://me-about.me/test/wp-content/uploads/2016/06/technology02.jpg") no-repeat center center;
  background-size: auto 100%;
}

(没有float，取而代之的是flexbox，有助于调整图片的高度为左半部分表格的高度)