时间戳

首页 > 解决方案 > 在具有另一个背景图像问题的容器内使用背景图像缩放三个 div

html - 在具有另一个背景图像问题的容器内使用背景图像缩放三个 div

问题描述

我目前正在处理一个花了我一整天的问题。我有一个带有背景图像的容器，其中有 3 个 div，每个 div 都有一个背景图像（img 大小：185x2035）。我试图使其流畅，但问题是当我调整屏幕大小时，3 个 div 的高度增加而宽度减少。我对容器使用了 procentual 宽度，对于 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 {


      }


    }

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

标签： htmlcss

解决方案

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

flex-wrap CSS 属性设置 flex 项目是强制在一行上还是可以换行到多行上。如果允许换行，它会设置行堆叠的方向。

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

没有它，灵活的孩子只是试图适应一条线并伸展。您可能需要进行一些修复，但大多数情况下它应该可以解决您的问题。

（例如：https://codepen.io/anon/pen/BMWaqa，您应该在提出此类问题时尝试其中之一，或者其中之一：https://jsfiddle.net/，这对我们来说更容易来帮助你）

推荐阅读