Question

是否有建议的方法根据文本构成列的大小将图像设置为Neat中列的高度的100％？我附上了一个我想在下面完成的例子。

我正在尝试使用object-fit: cover填充它所放置的1/3列，问题是因为没有设置容器的高度，它不知道该怎么做适合图像。

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

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

我应该注意到，我试图在不设置父容器的特定高度（例如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将导致两个对象填充垂直空间。剩下的就是object-fit: cover等等

Neat 2.0中的响应式图像

1 个答案: