Question

我有一个固定宽高比的图像，但响应式格式，作为两列弹性行中的第一项，如下所示：

<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的一个非常标准的用例。每当你发现你需要改变某些东西时＃34;当达到一个方便的高度时＃34; （借用你的话），你可以考虑使用媒体查询在达到设定维度时更改尺寸。例如：

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

希望这将为您提供对所需div维度的控制级别。

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

1 个答案: