samedi 25 juin 2016

Scaling/cropping image to fit container height with unknown dimensions?


Two divs side by side, unknown height, 50% width. In the right div, an image. must always fit left div height, eventually:

  • if higher: scaling
  • if shorter: scaling to fit height & cropping left/right (no stretch).

JsFiddle here

No background image please!

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

Aucun commentaire:

Enregistrer un commentaire