Question

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

如果更高：缩放
如果更短：缩放以适合身高和左/右裁剪（无拉伸）。

JsFiddle here

请不要背景图片！

＆＃13;

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

＆＃13;

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

＆＃13;

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，这有助于将图像的高度调整到左半边桌子的高度）

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

1 个答案: