如何根据图像的比例调整 bg-image 大小？

Question

我正在尝试构建一个视差网站，但在调整图像大小时我运行遇到了问题。
我的目标是将图像放在背景中（显然）并在其上滚动。

要让第二层出现在前景中，我需要指定 "gap" 的高度，直到第二层开始在图像上滚动。如果我理解正确的话，那就是我代码中.bg-img1（等）的值min-height: X;。

当然我可以简单地输入一些像素，比方说600，并且总是有600px的距离。但我想要实现的是高度根据 bg-image 的比例缩放。否则我会在较小的设备上得到一个带有很多白色的小图像 space。

我的一些代码：

.bgimg-1, .bgimg-2, .bgimg-3 {
  position: relative;
  opacity: 0.65;
  background-attachment: fixed;
  background-position: center;
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  -o-background-size: 100% auto;
  background-size: 100% auto;
  background-repeat: no-repeat;


  }
  .bgimg-1 {
    background-image: url("images/viive_10.jpg");
    min-height: 600px;
    width: 100%;
  }

  .bgimg-2 {
    background-image: url("images/viive_26.jpg");
    min-height: 600px;
    width: 100%;
  }

  .bgimg-3 {
    background-image: url("images/viive_24.jpg");
    min-height: 600px;
    width: 100%;
  }

Answer 1

你可以测试宽度 background-size:cover; 或 background-size:content; 这里你有区别。

https://css-tricks.com/almanac/properties/b/background-size/

如何根据图像的比例调整 bg-image 大小？

How can the bg-image size be adjusted according to the scale of the image?

html

css

web

responsive

parallax