Question

我目前正在处理一个整日困扰着我的问题。我有一个带有背景图像的容器，该容器具有3个div，每个背景图像（img size：185x2035）。我试图使其流畅，但问题是，当我调整屏幕大小时，3 div的高度增加而宽度减小。我为容器使用了procental width，为3 div使用了固定的宽度和高度。有解决办法吗？也许是js脚本之类的东西？真的很讨厌我我还要发布代码，谢谢！

    <!DOCTYPE html>
    <html>
    <head>
      <link rel="stylesheet" type="text/css" href="style.css">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body>

      <div class="slot-machine">
        <div class="scale-please">


            <div class="slot-strip"></div>
            <div class="slot-strip"></div>
            <div class="slot-strip"></div>


        </div>
      </div>


    </body>

    </html>


    /*   --- My styling --- */
    * {
      margin:0;
      padding:0;
      border:0 none;
      box-sizing: border-box;
    }

    html,body {
      width:100%;
      height:100%;
    }

    body {
      background:url("bg.jpg");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      width:100%;
      padding:200px 0;
    }

    .slot-machine {
      background:url("slot-machine.png");
      background-repeat: no-repeat;
      background-position:center;
      margin:auto;
      width:90%;
      height: 240px;
      overflow: hidden;
      display: flex;
      justify-content: center;

    }

    .scale-please {
      width:400px;
      height:200px;
      background:rgba(0,0,0,0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top:50px;

    }

    .slot-strip {
      background:url("slot-strip.png");
      background-repeat: repeat-y;
      background-size: cover;
      float:left;
      width:90px;
      height:90px;
      z-index: 4;
      padding-top:70px;
      border:1px solid red;

    }

    .slot-strip:nth-child(2) {
      margin-left:25px;
      margin-right: 25px;
    }






    @media only screen and (max-width: 1250px) {
      .slot-machine {
        width:98%;
        background-size: contain;

      }

      .scale-please {
        width:42%;
      }

      .slot-strip {
        width:70px;
        height:70px;
      }
    }


    @media only screen and (max-width: 780px)  {
      .scale-please {


      }


    }

我也想将图像保留为背景，因为我可以使用背景位置制作旋转动画。

Answer 1

如果您在这里看看： https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

flex-wrap CSS属性设置是否将flex项目强制放置到一个线路或可以包装到多行。如果包装是允许的，它集的方向即线条重叠。

简而言之：尝试将flex-wrap:wrap;添加到.scale-please

没有它，flex子项只是试图适应一条线并伸展。你可能有一些修正，以使，但主要应该解决您的问题。

（例如：https://codepen.io/anon/pen/BMWaqa，当您问这种问题时，您应该尝试使用其中之一，或者使用https://jsfiddle.net/之一，我们可以更轻松地为您提供帮助）

在具有另一个背景图片问题的容器中缩放具有背景图片的三个div

1 个答案: