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和out中）。
将您的页脚更改为绝对定位，以及其他一些允许其粘贴到底部的更改，直到您的视口太短。然后它像普通的页脚一样被推下来。这可以防止您的内容落后于页脚。
使用“overflow-x：scroll”制作“gallery-wrapper”。我个人不喜欢横向卷轴画廊，但如果你的心脏被设置在它上面，这将保持横向滚动包含在这个块中，而不是整个网站（反过来又不需要“修复”）页脚）。
选择一些更逼真的图像尺寸，以及更短的vh（70）。

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

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

所以，除了上述更改之外，我还是建议：

以适当的浏览器宽度（例如760）设置媒体查询，以便您的图像按浏览器宽度而非高度（因此为vw，而不是vh）进行缩放。
这可能需要一些特殊的“最小高度”设置，以防止高大的图像变得太高，并且短图像变成小munchkins。

高度响应水平图像库，固定标题和＆amp;页脚

1 个答案: