未知の次元のコンテナの高さに合わせて画像をスケーリング/トリミングするか？

Question

2つの横並び、未知の高さ、50％幅。右側のdivには、画像があります。高い場合

• ：常に最終的には左の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

私はそれが背景画像（私はいくつかの方法を試してみましたが、画像の高さ調整は、他の方法では動作しません）とフレックスを使用して除いことはできません怖いです：

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

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

（目の高さを調整するのに役立つ代わりのないフロート、フレキシボックス、左半分のテーブルの高さに画像を添付）