title: Responsive Image in Neat 2.0
body: <p>Is there a recommended way to get an image to be 100% of the height of a column in Neat based on the size that the text makes the column? I've attached an example of what I'm trying to accomplish below. </p>
  
  <p>I'm trying to make the image fill the 1/3 column it is placed in with <code>object-fit: cover</code>, the problem is that because the height of the container isn't set, it doesn't know what to fit the image to. </p>
  
  <p><a href="https://i.stack.imgur.com/wEnQm.jpg" rel="nofollow noreferrer">Image With No Height Set</a></p>
  
  <p>If I put the image in a div with <code>display: flex;</code> and <code>height:100%</code>, the height gets set to the height of the image, when I want it to get set to the height of the parent, which is the grid-container that has the two columns in it.</p>
  
  <p><a href="https://i.stack.imgur.com/6vjjw.jpg" rel="nofollow noreferrer">Image With 100% Height Set</a></p>
  
  <p>What I'm trying to accomplish is have a responsive image that constantly fills the space of its column to match the height of the text in the next column.</p>
  
  <p><strong>I should note that I'm trying to accomplish this without setting a specific height for the parent container such as <code>height:200px</code>, I want the height to be fluid to the content in it.</strong></p>
  
  <p><strong>HTML Code:</strong></p>
  
  <pre><code>&lt;section class="image-block" style="background: #5777e0; color:#fff;"&gt;
    &lt;div class="one-thirds-column-full no-padding third-image-box"&gt;
      &lt;div class="flex"&gt;
        &lt;img src="https://unsplash.it/1600/1200?image=148" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="two-thirds-column-full"&gt;
      &lt;div class="text"&gt;
        &lt;h2&gt;1/3 Image on Left with 2/3 Text on Right&lt;/h2&gt;
        &lt;p&gt;
          The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's
          keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>section {
    @include grid-container;
  
    @include grid-media($neat-small) {
         @include grid-container($neat-small);
    }
    @include grid-media($neat-medium) {
         @include grid-container($neat-medium);
    }
    @include grid-media($neat-large) {
         @include grid-container($neat-large);
    }
    @include grid-media($neat-larger) {
         @include grid-container($neat-larger);
    }
    @include grid-media($neat-super) {
         @include grid-container($neat-super);
    }
  }
  
  .one-thirds-column-full {
      @include grid-column(1, $neat-grid-full);
      padding:1em;
  
      @include grid-media($neat-medium-full) {
           @include grid-column(2);
      }
      @include grid-media($neat-large-full) {
           @include grid-column(4);
      }
  }
  
  .two-thirds-column-full {
      @include grid-column(1, $neat-grid-full);
      padding:1em;
      @include grid-media($neat-small-full) {
           @include grid-column(2);
      }
      @include grid-media($neat-medium-full) {
           @include grid-column(4);
      }
      @include grid-media($neat-large-full) {
           @include grid-column(8);
      }
  }
  
  .image-block{
    background: #fff;
    text-align: left;
  
    .third-image-box{
      height:auto;
    }
  
    .half-image-box{
      height:auto;
    }
  
    .flex{
      display:flex;
      height:100%;
    }
  
    img{
      height:auto !important;
      object-fit: cover;
    }
  }
  .text{
    max-width:$max-text-width;
  }
  </code></pre>