縮放/裁剪圖像以適應具有未知尺寸的容器高度？

Question

並排兩個div，高度未知，寬度爲50％。在正確的div，一個圖像。必須總是適合留格的高度，最終：

• 如果更高：縮放
• 如果短：縮放以適應高度&裁剪左/右（無拉伸）。

的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%; 
} 

（沒有浮動，Flexbox的代替，這​​有助於調節理論值的高度e圖像到左側表格的高度）