html - 控制相邻DIV到IMG标签的高度

Question

我有一张固定纵横比但响应格式的图像，作为两列 flex 行中的第一项，如下所示:

<div class="d-flex flex-column flex-md-row">
  <!-- main photo -->
  <img class="" src="http://lorempixel.com/300/160" srcset="http://lorempixel.com/400/225 400w,
  http://lorempixel.com/475/267 475w,
  http://lorempixel.com/540/304 540w,
  http://lorempixel.com/600/338 600w,
  http://lorempixel.com/800/450 800w,
  http://lorempixel.com/950/534 950w,
  http://lorempixel.com/1080/608 1080w,
  http://lorempixel.com/1200/675 1200w" sizes="(min-width: 1200px) 475px, (min-width: 992px) 400px, (min-width: 768px) 300px, (min-width: 576px) 540px, 100vw">
  <!-- details -->
  <div class="p-3 d-flex flex-column justify-content-center w-100">
    <div class="py-2 scroll-overflow">
      A LONG, LONG, LONG TEXT GOES HERE!
    </div>
  </div>

一旦达到“方便”的高度，即相邻图像的高度，我如何才能让上面的长文本滚动到 div 中。我无法为 div 设置固定高度，因为图像是响应式的，它的高度会在用户移动窗口时发生变化。

Answer 1

这似乎是 media queries 的一个非常标准的用例.每当您发现“达到方便的高度时”(借用您的话)需要更改某些内容时，您可以考虑使用媒体查询在达到设定尺寸时更改尺寸。示例:

@media (max-width: 1200px) {
  .py-2 {
    height: /* something */;
    width: /* something */;
  }
}

希望这会为您提供所需的 div 尺寸控制级别。