chainboost chainboost - 3 months ago 12
CSS Question

Giving the image the same height as the text block next to it in Materialize CSS

I'm trying to achieve this effect:

Desktop size

Tablet Size

Mobile Size

I have this now:

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


What do I need to let the image know what size the right text box is and actually resize?

Answer

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

Comments