html - 在 Materialise CSS 中使图像与旁边的文本 block 具有相同的高度

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>