在Materialise CSS中为图像提供与其旁边的文本块相同的高度

Question

我试图达到这个效果：

我现在有这个：

http://codepen.io/chainboost/pen/YWmVKE

    <!-- Start Schilderij Home -->
  <div class="schilderij-home">
    <div class="container">
      <div class="row">
        <div class="col s12 m6 left-image section">
          <img src="http://www.thisiscolossal.com/wp-content/uploads/2016/03/finger-4.jpg" class="responsive-img" />
        </div><!-- /col s12 m6 left-image -->
        <div class="col s12 m6 text-right section">
          <h3>Op maat gemaakt schilderij?</h3>
          <p>
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
            doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
            veritatis et quasi architecto beatae vitae dicta sunt explicabo.Lorem ipsum dolor
            sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper
            mattis, pulvinar dapibus leo temporibus autem.
          </p>
          <div class="col s12 m6 icon-text">
            <i class="medium material-icons">search</i>
            <h4>Schilderij in opdracht</h4>
          </div><!-- /col s12 m6 icon-text -->
          <div class="col s12 m6 icon-text">
            <i class="medium material-icons">search</i>
            <h4>Schilderij in opdracht</h4>
          </div><!-- /col s12 m6 icon-text -->          
        </div><!-- /col s12 m6 text-right -->
      </div><!-- /row -->
    </div><!-- /container -->
  </div><!-- /schilderij-home -->
<!-- End Schilderij Home -->

我需要什么才能让图像知道正确文本框的大小并实际调整大小？

Answer 1

// check if browser understand object-fit style - affect css styles
if (window.getComputedStyle(document.body).objectFit !== undefined) {
  $("body").addClass("object-fit-compatible");
// check if browser understand background-size style - affect css styles
} else if (window.getComputedStyle(document.body).backgroundSize !== undefined) {
  $("body").addClass("background-size-compatible");
  $('img').each(function() {
    $(this).css({
      'background-image': 'url(\'' + $(this).attr('src') + '\')'
    });
  });
}

.right {
  float: right !important;
}
.wrapper {
  position: relative;
  width: 100%;
}
.wrapper:after {
  content: ' ';
  display: block;
  clear: both;
}
.wrapper-text {
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 50%;
  padding: 20px;
  background-color: #eee;
}
.wrapper-image {
  float: left;
  width: 50%;
  min-height: 1px;
}
.wrapper-image img {
  position: absolute;
  width: 50%;
  height: 100%;
}
.object-fit-compatible .wrapper-image img {
  object-fit: cover;
}
.background-size-compatible .wrapper-image img {
  width: 0;
  height: 0;
  padding: 50% 25%;
  background-position: 50% 50%;
  background-size: cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="wrapper-image">
    <img src="http://dummyimage.com/800x400/ddd/333/" />
  </div>
  <div class="wrapper-text">
    text
    <br />text
    <br />text
    <br />text
    <br />text
    <br />text
    <br />text
    <br />text
    <br />text
    <br />text
    <br />text
    <br />text
    <br />text
    <br />text
    <br />text
    <br />text
  </div>
</div>
<div class="wrapper">
  <div class="wrapper-image right">
    <img src="http://dummyimage.com/800x400/ddd/333/" />
  </div>
  <div class="wrapper-text">
    text
    <br />text
    <br />text
    <br />text
    <br />text
    <br />text
    <br />text
    <br />text
    <br />text
    <br />text
  </div>
</div>