Neat 2.0中的响应式图像

Question

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.

I'm trying to make the image fill the 1/3 column it is placed in with object-fit: cover , the problem is that because the height of the container isn't set, it doesn't know what to fit the image to.

Image With No Height Set

If I put the image in a div with display: flex; and height:100% , 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.

Image With 100% Height Set

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.

I should note that I'm trying to accomplish this without setting a specific height for the parent container such as height:200px , I want the height to be fluid to the content in it.

HTML Code:

<section class="image-block" style="background: #5777e0; color:#fff;">
  <div class="one-thirds-column-full no-padding third-image-box">
    <div class="flex">
      <img src="https://unsplash.it/1600/1200?image=148" />
    </div>
  </div>
  <div class="two-thirds-column-full">
    <div class="text">
      <h2>1/3 Image on Left with 2/3 Text on Right</h2>
      <p>
        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.
      </p>
    </div>
  </div>
</section>

CSS:

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

Answer 1

1. There is a bug in the documentation and grid-container does not require or need access to the grid so you can shorten the first part to ⤵

    section { @include grid-container; 

2. I don't think you need that much markup in the html around the img. You may be able to just do

    <section class="image-block"> <img src="https://unsplash.it/1600/1200?image=148" class="one-thirds-column-full"> <div class="two-thirds-column-full"> … </div> </section> 

   and then the css would be like…

    .image-block{ align-items: stretch; display: flex; } 

align-items: stretch will cause both objects to fill the vertical space. The rest is up to object-fit: cover , etc