Neat 2.0 中的响应图像

Question

在 Neat 中，是否有推荐的方法可以根据文本构成列的大小使图像成为列高度的 100%？我在下面附上了我要完成的示例。

我试图用 object-fit: cover 使图像填充它所在的 1/3 列，问题是因为未设置容器的高度，所以它不知道适合图像的内容。

Image With No Height Set

如果我将图像放在 div 中，其中包含 display: flex; 和 height:100%，高度将设置为图像的高度，当我希望它设置为父级的高度，它是其中包含两列的网格容器。

Image With 100% Height Set

我想要完成的是拥有一个响应式图像，该图像不断填充其列的 space 以匹配下一列中文本的高度。

我应该注意，我试图在不为父容器设置特定高度的情况下完成此操作，例如 height:200px，我希望高度能够随其中的内容变化.

HTML代码：

<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

文档中存在错误，grid-container 不需要或不需要访问网格，因此您可以将第一部分缩短为 ⤵
```
section {
@include grid-container;
```

我认为您不需要在 img 周围的 html 中添加那么多标记。你也许可以做

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

然后 css 就像……

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

align-items: stretch 将导致两个对象填充垂直 space。剩下的就是object-fit: cover，等等

Neat 2.0 中的响应图像

Responsive Image in Neat 2.0

css

image

neat

bourbon