Question

我使用以下问题中接受的答案中的jQuery脚本来制作响应浏览器高度变化的水平布局：

Resize images in a horizontal layout as the browser height changes

我的问题是，使用vh和vw单位只用CSS代码可以实现同样的效果吗？

提前致谢

Answer 1

为了确保我能帮到你：你想要一个可以在浏览器窗口缩小/增长的水平滚动图像列表（并希望使用vh / vw）。 对吗？

您可以将图片作为css background-image而不是<img>插入，并使用background-size: contain调整图片大小（使用vh - 依赖height容器）：

ul {
  white-space: nowrap;
  overflow-x: auto;
}

li {
  display: inline-block;
  width: 80px;
  height: 50vh;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

li:nth-of-type(1) { background-image: url(//lorempixel.com/80/120); }
li:nth-of-type(2) { background-image: url(//lorempixel.com/80/90);  }
li:nth-of-type(3) { background-image: url(//lorempixel.com/80/70);  }
li:nth-of-type(4) { background-image: url(//lorempixel.com/80/160); }
li:nth-of-type(5) { background-image: url(//lorempixel.com/80/100); }
li:nth-of-type(6) { background-image: url(//lorempixel.com/80/60); }
li:nth-of-type(7) { background-image: url(//lorempixel.com/80/70); }
li:nth-of-type(8) { background-image: url(//lorempixel.com/80/90); }
li:nth-of-type(9) { background-image: url(//lorempixel.com/80/130); }
li:nth-of-type(10) { background-image: url(//lorempixel.com/80/110); }

<ul>
  <li>&nbsp;</li>
  <li>&nbsp;</li>
  <li>&nbsp;</li>
  <li>&nbsp;</li>
  <li>&nbsp;</li>
  <li>&nbsp;</li>
  <li>&nbsp;</li>
  <li>&nbsp;</li>
  <li>&nbsp;</li>
  <li>&nbsp;</li>
</ul>

修改：请注意，background-size: contain是performance bottleneck。但为此添加transform: translate3d(0,0,0) suggested as a workaround。

仅使用vh和vw单位的响应式水平布局

1 个答案: