Question

我在我的项目中使用Zurb foundation，一方面我只有top-bar和image gallery。我需要以某种方式使图像库占据顶部栏下面的页面上的整个空间。我需要用图像填充该空间，然后根据屏幕大小调整它们的大小。图库部分不应大于或小于页面上其他空间。应禁用滚动，因此图库的高度应始终为从顶部栏到页面底部的空间量。正如我之前写的那样填充了周围具有相同间距的图像，并且这些图像应根据屏幕调整大小。我不知道如何实现这一点，我尝试过使用像column-block这样的默认基础类，但是当我调整屏幕大小时，图像下方有空间。这是html：

<div class="content">
  <div class="top-bar">
    ...top bar content
    </div>
  </div>


<div class="gallery">
  <div class="small-up-3 medium-up-8 large-up-12">
    <div class="column column-block text-center gallery-image-wrapper">
      <img src="//placehold.it/160x160" alt="">
    </div>
    <div class="column column-block text-center gallery-image-wrapper">
      <img src="//placehold.it/160x160" alt="">
    </div>
    <div class="column column-block text-center gallery-image-wrapper">
      <img src="//placehold.it/160x160" alt="">
    </div>
    <div class="column column-block text-center gallery-image-wrapper">
      <img src="//placehold.it/160x160" alt="">
    </div>
    <div class="column column-block text-center gallery-image-wrapper">
      <img src="//placehold.it/160x160" alt="">
    </div>
    <div class="column column-block text-center gallery-image-wrapper">
      <img src="//placehold.it/160x160" alt="">
    </div>
    <div class="column column-block text-center gallery-image-wrapper">
      <img src="//placehold.it/160x160" alt="">
    </div>
    <div class="column column-block text-center gallery-image-wrapper">
      <img src="//placehold.it/160x160" alt="">
    </div>
  </div>
</div>

CSS / Html - 使图像库占据屏幕高度的其余部分，并相应地调整图像

0 个答案: