高度响应水平图像库，固定页眉和页脚

Question

我正在尝试为我的网站上的摄影作品集制作一个水平滚动画廊，但我希望图像能够响应高度（以适应不同的屏幕尺寸）。为了尝试执行此操作，我使用了单位：vh，这给我带来了问题。
我有一个 position:fixed 页眉和页脚，因此当您滚动浏览画廊时它们始终停留在屏幕上。使用 CCS 时，我使用这意味着随着屏幕变小，图像会位于页眉和页脚下方，而不是一直停留在它们之间。

我看到一个网站的理想水平画廊与我想要实现的目标非常相似。您可以查看网站here。在链接的网站上，图像似乎总是与页眉和页脚保持等距。
当检查元素时，看起来他们正在使用表格，我认为这是一个很大的不，不。这就是他们在画廊中实现这种效果的方式吗？

我已将 JS Fiddle 链接到我的设计的一个非常基本的版本，因此您可以看到我到目前为止所做的工作。

JS 小提琴：https://jsfiddle.net/pmh9zvta/1/

基本上，一句话，我问我如何才能达到与链接中的示例网站相同的效果。

Answer 1

罗宾，

嗯...所以 vh 实际上可以达到非常相似的效果。不过，您的示例图像相当极端（1500x100）。

查看我制作的这个小提琴（以您的代码为基础）： https://jsfiddle.net/Benihana77/5xw21tvc/

*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  height: 100%;
  box-sizing: border-box;
  position: relative;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 100px;
  min-height: 100%;
}

#header {
  width: 100%;
  padding: 10px;
  margin-right: auto;
  margin-left: auto;
  position: fixed;
  background-color: #fff;
  background: rgb(255, 255, 255);
  /* Fall-back for browsers that don't support rgba */
  background: rgba(255, 255, 255, 0.92);
  text-align: center;
  z-index: 1;
}

#gallery-wrapper {
  position: relative;
  padding-top: 60px;
  overflow-x: scroll;
}

#gallery-wrapper img {
  height: 70vh;
  width: auto;
}

#footer {
  font-family: Corda-Light;
  font-size: 14px;
  color: #333;
  width: 100%;
  padding: 5px;
  padding-top: 13px;
  padding-bottom: 8px;
  padding-left: auto;
  padding-right: auto;
  position: absolute;
  bottom: 0;
  background-color: #efefef;
  text-align: center;
  background-color: #fff;
  background: rgb(255, 255, 255);
  /* Fall-back for browsers that don't support rgba */
  background: rgba(255, 255, 255, 0.9);
  z-index: 1;
}


/* Navigation Bar Styling */

.nav {
  border-bottom: 1px solid #ccc;
  border-width: 1px 0;
  list-style: none;
  margin: 0;
  padding: 0;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
}

.nav li {
  display: inline;
}

.nav a {
  display: inline-block;
  padding: 10px;
}


/* Horizontal Gallery Styling */

ul.gallery-row {
  white-space: nowrap;
}

ul.gallery-row li {
  list-style: none;
  display: inline;
}


/* Footer Styling */

.footer {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.footer img:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
}

主要变化

• 为您的内容添加了一个包装器，以便更好地管理（在 JSFiddle 内外）。

• 将您的页脚更改为绝对定位，同时进行许多其他更改，使其能够一直停留在底部，直到您的视口太短。然后它像普通页脚一样被向下推。这样可以防止您的内容出现在页脚后面。

• 使用“overflow-x:scroll”制作了“gallery-wrapper”。我个人不是横向滚动画廊的粉丝，但如果您一心一意，这将使横向滚动包含在此块中，而不是您的整个网站（反过来又消除了对“固定”的需要页脚）。

• 选择一些更逼真的图像尺寸，以及更短的 vh (70)。

关于您的示例，据我所知，他们正在使用 Javascript 重写“scrollHolder”容器 DIV 的高度。所以他们的解决方案不是 CSS-only，而是使用 JS 读取浏览器的高度并相应地调整高度。

我还要说他们的方法有缺陷，因为它不能正确缩放到浏览器宽度。在较薄的屏幕上，您只能看到每个图像的放大部分。

因此，除了上述更改之外，我建议：

• 将媒体查询设置为适当的浏览器宽度（例如 760），以便您的图像按浏览器宽度而不是高度（所以是 vw，而不是 vh）进行缩放。

• 这可能需要一些特殊的“最小高度”设置，以防止高大的图像变得太高，而短的图像也不会变成小矮人。