Html 带有水平卷轴的非常宽的图片_Html_Css_Scroll_Responsive

Html 带有水平卷轴的非常宽的图片

html css scroll

Html 带有水平卷轴的非常宽的图片,html,css,scroll,responsive,Html,Css,Scroll,Responsive,我有一个非常宽的图像（6600 x 1080），我需要它在2200 x 1080的“部分”中使用水平滚动，因为当我以100%的高度和自动宽度放置它时，底部有一个很大的空白 .body { margin: 0; padding: 0; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; white-space: nowrap; } .container { /* position: fixed; to

我有一个非常宽的图像（6600 x 1080），我需要它在2200 x 1080的“部分”中使用水平滚动，因为当我以100%的高度和自动宽度放置它时，底部有一个很大的空白

.body {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  white-space: nowrap;
}

.container {
  /* position: fixed;
  top: 0;
  left: 0;
  width: 100%; */
  display: flex;
  width: max-content;
  /*height: inherit;*/
  height: 100vh;
}

/* section {
  min-width: 100%;
  height: auto;
  display: flex;
  /*background-image: url("../img/bg.jpg");*/
/* background: url("../img/bg.jpg") no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;
} */
section.imgBx {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

section.fijo {
  position: fixed;
  min-width: 50%;
  height: 100vh;
}

section.img {
  position: fixed;
  top: 0;
  left: 0 px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

HTML


演示信息格拉菲亚

我们的想法是以房屋为背景，在屏幕上固定一辆面包车，我的目的是通过滚动移动背景图像，使其看起来卡车正在沿街行驶

哪个图像遇到了问题？还有，你能吗？你有没有试过用高度：100%替换所有高度：100vh？

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo infografía</title>
    <link rel="stylesheet" href="./css/style.css" />
    <link href="./css/tema.css" rel="stylesheet" />
    <script src="./js/pace.js"></script>
  </head>

  <body>
    <div class="container">
      <section style="position: fixed;z-index: 9;top: 24vh;">
        <div class="img">
          <img
            class="img"
            src="./img/escena01/camioneta.png"
            style="width: 70%;"
          />
        </div>
      </section>
      <section
        style="left: -100%; width: 304vw;
    background-size: contain;
    background-repeat: no-repeat;
    height: 100vh;"
        data-0="transform:translateX(0%)"
        data-100="left: -100%"
      >
        <img src="img/escena01/escena01-1.jpg" />
      </section>
      <section
        style="left: -100%; width: 304vw;       
          background-size: contain;
          background-repeat: no-repeat;
          height: 100vh;"
        data-0="transform:translateX(0%)"
        data-100="left: -100%"
      >
        <img src="img/escena01/escena01-2.jpg" />
      </section>
      <section
        style="left: -100%; width: 304vw;
              background-size: contain;
              background-repeat: no-repeat;
              height: 100vh;"
        data-0="transform:translateX(0%)"
        data-100="left: -100%"
      >
        <img src="img/escena01/escena01-3.jpg" />
      </section>
      <section
        style="left: -100%;width: 800px;height: 100vh;background: blue;"
        data-0="transform:translateX(0%)"
        data-100="left: -100%"
      ></section>
      <section
        style="left: -100%;
    width: 800px;
    height: 100vh;
    background: green;"
        data-0="transform:translateX(0%)"
        data-100="left: -100%"
      ></section>
      <section
        style="left: -100%;
width: 800px;
height: 100vh;
background: red;"
        data-0="transform:translateX(0%)"
        data-100="left: -100%"
      ></section>
      <section
        style="left: -100%;
width: 800px;
height: 100vh;
background: blue;"
        data-0="transform:translateX(0%)"
        data-100="left: -100%"
      ></section>
    </div>
    <!-- <script type="text/javascript" src="./js/skrollr.js"></script>
    <script type="text/javascript">
      var s = skrollr.init();
    </script> -->
  </body>
</html>