Question

我试图在另一个 div 的圆形透明度后面放置一个圆形饼状进度条 div。由于我对齐的 div 与绝对定位的子图像 div 相对，因此我将“饼图”div 作为该相对定位 div 的子元素，也绝对定位，并将填充属性设置为百分比，认为可以确保它响应同级/父级 div 的大小。

一开始看起来不错，但如果我调整窗口大小，它就不会停留。如果不设置填充，我如何确保它保持正确对齐和响应？

代码笔：https://codepen.io/TheNomadicAspie/pen/RwVJZEe

编辑：抱歉，我想我应该提到这一点，但这是一个动画进度条，而不是静态图像。所以将它们组合成一个 png 不是一个答案，我需要将圆形 div 动态定位在徽标 png 的透明度后面，以便它可以用作进度条。

const pieCharts = document.querySelectorAll('[data-percentage]');

if (pieCharts) {
  for (let i = 0; i < pieCharts.length; i += 1) {
    const slice = pieCharts[i];
    const percentage = slice.getAttribute('data-percentage');
    const circumference = 31.4;
    const strokeDash = Math.round((percentage * circumference) / 100);
    const strokeDashArray = `${strokeDash} ${circumference}`;

    slice.setAttribute('stroke-dasharray', strokeDashArray);
  }
}

* {
  outline: none;
  opacity: 1;
  -webkit-box-sizing: border-box;
  -mo-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  position: fixed;
  height: 100%;
  background-color: #26004b;
  font-size: 2vh;
  margin: 0 auto;
  font-family: open_sans;
}

.screen {
  position: absolute;
  height: 100%;
}

.menu-bar {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  position: relative;
  height: 13.714%;
  width: 100vw;
  top: 0%;
  text-align: center;
}

.pie {
  grid-column: 1/2;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 50%;
  right: 50%;
  top: 50%;
  bottom: 50%;
  transform: translate(-50%, -50%);
  padding-top: 3%;
  padding-bottom: 14%;
  padding-right: 5%;
  padding-left: 1%;
  z-index: -1;
}

.logo,
.logo-animation {
  grid-column: 1/2;
  position: relative;
  height: 100%;
}

.logo img,
.logo-animation img {
  position: absolute;
  height: auto;
  max-height: 90%;
  max-width: 90%;
  left: 50%;
  right: 50%;
  top: 50%;
  bottom: 50%;
  transform: translate(-50%, -50%);
}

.logo-animation {
  display: none;
}

.title {
  grid-column: 2/3;
  position: relative;
  color: #f5f5f5;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-family: hack;
  font-size: clamp(2vw, 8vw, 10vh);
  display: flex;
  top: 0%;
}

.menu-button {
  grid-column: 3/4;
  position: relative;
  height: 100%;
}

.menu-button img {
  position: absolute;
  height: auto;
  max-height: 75%;
  max-width: 75%;
  left: 50%;
  right: 50%;
  top: 50%;
  bottom: 50%;
  transform: translate(-50%, -50%);
}

.display {
  position: relative;
  height: 86.286%;
  width: 100vw;
}

.speech-bubble {
  display: grid;
  grid-template-rows: 80% 0% 20%;
  position: relative;
  background-color: #f5f5f5;
  height: 61.8%;
  width: 90vw;
  margin: auto;
  border-radius: 2em;
  padding-bottom: 1em;
}

.speech-bubble:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 15vw;
  width: 0;
  height: 0;
  border: 4em solid transparent;
  border-top-color: #f5f5f5;
  border-bottom: 0;
  margin-left: -2em;
  margin-bottom: -2em;
  z-index: -1;
}

<div id="screen" class="screen">
  <div id="menu_bar" class="menu-bar">
    <div id="logo" class="logo" data-flip-id="logo"> <img id="logo_image" src="https://i.imgur.com/D9LOkQI.png">
      <div id="pie" class="pie">
        <svg height="100%" width="100%" viewBox="0 0 20 20" data-percentage="50">
          <circle r="10" cx="10" cy="10" fill="white" />
          <circle r="5" cx="10" cy="10" fill="transparent" stroke="tomato" stroke-width="10" transform="rotate(-90) translate(-20)" />
        </svg>
      </div>
    </div>

    <div id="title" class="title">Title</div>
    <div id="menu_button" class="menu-button"> <img id="menu_image" src="https://i.imgur.com/l6GysYf.png"> </div>
  </div>
  <div id="display" class="display">
    <div id="speech_bubble" class="speech-bubble">
      <div id="logo_animation" class="logo-animation" data-flip-id="logo">
        <img id="logo_animation_image" src="https://media0.giphy.com/media/Z1oYdpUd9Txyop1jdH/giphy.gif?cid=790b7611436e68e9fdddc32ce5e4e6c3a4730caba6ef8f0c&rid=giphy.gif&ct=s">
      </div>
    </div>
  </div>
</div>

Answer 1

这里有一个完美的响应式设计，主要基于您的设计并解决了您的对齐问题。

  const pieCharts = document.querySelectorAll('[data-percentage]');

    if (pieCharts) {
    for (let i = 0; i < pieCharts.length; i += 1) {
    const slice = pieCharts[i];
    const percentage = slice.getAttribute('data-percentage');
    const circumference = 31.4;
    const strokeDash = Math.round((percentage * circumference) / 100);
    const strokeDashArray = `${strokeDash} ${circumference}`;

    slice.setAttribute('stroke-dasharray', strokeDashArray);
    }
    }

* {
    outline: none;
    opacity: 1;
    -webkit-box-sizing: border-box;
    -mo-box-sizing: border-box;
    box-sizing: border-box;
    }

    html, body {
    position: fixed;
    height: 100%;
    background-color: #26004b;
    font-size: 2vh;
    margin: 0 auto;
    font-family: open_sans;
    }

    .screen {
    position: absolute;
    height: 100%;
    }

    .menu-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* changed */
    position: relative;
    width: 100vw;
    top: 0%;
    background: #504;
    }

    .logo {
    grid-column: 1/2;
    position: relative;
    height: 100%;
    left: 30px;
    top: 48%;
    }

    .pie {
    grid-column: 1/2;
    position: relative;
    height: 100%;
    left: 30px;
    top: -13.5px;
    }

    .logo-animation img {
    position: fixed;
    max-height: 50%;
    max-width: 50%;
    left: 25%;
    top: 20%;
    }

    .logo-animation {
    display: none;
    }

    .title {
    grid-column: 2/3;
    position: relative;
    color: #f5f5f5;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-family: hack;
    font-size: 18px;
    display: flex;
    top: -15px;
    }

    .menu-button {
    grid-column: 3/4;
    position: relative;
    height: 100%;
    width:100%
    top: -20px;
    }

    .menu-button img {
    position: absolute;
    height: auto;
    max-height: 75%;
    max-width: 75%;
    right: 30px;
    top: -15px;
    }

    .display {
    position: relative;
    height: 85%;
    width: 100vw;
    }

    .speech-bubble {
    display: grid;
    grid-template-rows: 80% 0% 20%;
    position: relative;
    background-color: #f5f5f5;
    height: 70%;
    width: 90vw;
    margin: auto;
    top:20px;
    border-radius: 2em;
    }

    .speech-bubble:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 15vw;
    width: 0;
    height: 0;
    border: 4em solid transparent;
    border-top-color: #f5f5f5;
    border-bottom: 0;
    margin-left: -2em;
    margin-bottom: -2em;
    z-index: 5;
    }

  <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">

    <title></title>
  </head>

    <body>
    <div id="screen" class="screen">
    <div id="menu_bar" class="menu-bar">
    <div id="logo" class="logo" data-flip-id="logo">
    <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 20 24" width="20" height="24">
    <path style="fill:#fff;stroke:#000000;stroke-width:0.3;" d="M 7.4347575,23.687249 C 6.7657083,23.617747 5.8743833,23.456411 5.3343024,23.30705 4.2494383,23.00703 3.0321409,22.586564 2.5787262,22.355249 l -0.161491,-0.08239 0.2083834,-0.371601 C 3.31636,20.669493 3.7214077,19.3757 3.8787139,17.898658 3.9446758,17.2793 3.9447325,17.198031 3.8795414,16.712217 3.6584171,15.064358 3.2545292,14.221128 1.7924095,12.354738 1.1731552,11.564262 0.93553847,11.203828 0.69435576,10.689133 -0.21376451,8.7511602 0.36640093,5.0448055 1.8831808,3.0943901 3.7676419,0.67117597 7.6712465,-0.36965586 11.223573,0.60392863 c 0.639085,0.17515361 1.528585,0.52414417 1.8125,0.71112447 0.113841,0.074974 0.377197,0.2381938 0.585234,0.3627113 0.718899,0.4302856 1.128517,0.7363067 1.559014,1.164722 0.777085,0.7733277 1.162783,1.3220852 1.444944,2.0558187 0.287294,0.7470796 0.383709,1.3364182 0.447684,2.7364822 0.06268,1.3717627 0.173529,1.691786 0.864735,2.4965687 1.039786,1.210641 1.207568,1.459947 1.209247,1.796815 8.1e-4,0.162085 -0.02039,0.206692 -0.161107,0.338983 -0.08952,0.08416 -0.28389,0.19807 -0.434322,0.254529 -0.349284,0.13109 -0.452424,0.199434 -0.531375,0.352109 -0.07952,0.153766 -0.05531,0.2826 0.139422,0.742055 0.133326,0.314572 0.143059,0.363489 0.09893,0.4972 -0.05975,0.181042 -0.332904,0.422913 -0.564976,0.50027 -0.09444,0.03148 -0.177879,0.07577 -0.185428,0.09841 -0.0075,0.02265 0.1043,0.07866 0.248554,0.12447 0.334691,0.106285 0.383795,0.179954 0.260595,0.390962 -0.336461,0.576266 -0.321379,0.519649 -0.358266,1.344871 -0.04993,1.116967 -0.05865,1.168717 -0.230744,1.369776 -0.338544,0.395513 -0.847355,0.50361 -2.043859,0.43422 -0.435368,-0.02525 -0.972723,-0.05643 -1.194121,-0.06929 -0.712512,-0.04138 -1.161767,0.110795 -1.566106,0.530483 -0.277495,0.288029 -0.499456,0.682957 -0.643985,1.145823 -0.08825,0.282641 -0.09919,0.399826 -0.09888,1.059322 4.24e-4,0.869212 0.06746,1.178721 0.384783,1.77626 0.104203,0.196223 0.174583,0.370927 0.156399,0.388231 -0.05426,0.05163 -0.723296,0.242688 -1.172458,0.334817 -1.037513,0.212809 -2.5956568,0.272259 -3.8152335,0.145568 z m 7.8076415,-7.541143 c 0.487942,-0.244106 0.991808,-0.806307 0.872425,-0.973427 -0.02145,-0.03002 -0.353615,-0.441097 -0.738149,-0.913497 -0.384534,-0.4724 -1.351642,-1.661153 -2.149131,-2.641673 -1.832725,-2.2533543 -1.677869,-2.0749272 -1.802913,-2.0773387 -0.08,-0.00154 -0.173813,-0.086634 -0.387983,-0.3519101 L 10.754176,8.8383847 10.947432,8.5675619 C 11.176381,8.2467174 11.48233,7.6064246 11.576996,7.25 11.682255,6.8536958 11.740546,6.264033 11.708943,5.9152542 11.553337,4.197947 10.445213,2.8388591 8.7843482,2.328307 8.4352749,2.2210013 8.3511914,2.2121056 7.6859973,2.2121056 c -0.6643614,0 -0.7499741,0.00903 -1.1016949,0.116193 C 5.7546575,2.5810778 5.0451715,3.053384 4.5450927,3.6858043 3.4465333,5.0750881 3.3545389,6.946172 4.3134119,8.3979881 5.3311122,9.9388746 7.214027,10.599356 8.946616,10.023204 9.1505499,9.955389 9.4071244,9.8543064 9.5167821,9.7985767 L 9.7161596,9.6972504 10.023243,10.081848 c 0.227738,0.285225 0.295628,0.398401 0.26275,0.438017 -0.05855,0.07055 -0.09911,0.01559 1.573726,2.132677 2.805495,3.550547 2.88212,3.644068 2.985684,3.644068 0.05289,0 0.231535,-0.06773 0.396996,-0.150504 z" />
    <path style="fill:#000000;" d="M 14.708217,16.395304 C 14.638935,16.367446 14.02574,15.617738 12.614588,13.835581 10.27118,10.876068 10.124308,10.67985 10.121003,10.504223 10.118647,10.379007 9.7019461,9.8868898 9.6204444,9.9130716 9.5819223,9.9254462 9.3758634,10.003142 9.1625355,10.085729 7.9306935,10.562618 6.512264,10.409936 5.4017786,9.6809131 4.5225043,9.1036784 3.8655111,8.1564398 3.61005,7.0976381 3.5000334,6.6416559 3.5109622,5.6746251 3.6311584,5.2298545 3.8463536,4.4335525 4.2532946,3.7326236 4.8042655,3.2092551 5.2894208,2.748405 5.8264913,2.4340267 6.5207431,2.2045017 6.8646619,2.0907996 6.9172375,2.085427 7.6859973,2.085427 c 0.7673246,0 0.8219776,0.00556 1.1652543,0.1184597 1.4748224,0.4850691 2.5016674,1.5550546 2.8655974,2.985991 0.184589,0.7257883 0.165594,1.5860261 -0.04928,2.2316871 -0.10482,0.3149699 -0.411373,0.9434407 -0.583207,1.1956479 l -0.152034,0.2231453 0.207205,0.2489818 c 0.113963,0.1369403 0.279725,0.2844064 0.36836,0.3277026 0.187731,0.091702 0.233511,0.1457517 2.84766,3.3620496 1.413077,1.738569 1.910953,2.379472 1.910953,2.459925 0,0.458621 -1.15744,1.317468 -1.558289,1.156287 z m -3.986194,-6.034981 c 0.112454,-0.07216 0.300034,-0.235775 0.416845,-0.3635844 0.206159,-0.2255708 0.253579,-0.3102979 0.173667,-0.3102979 -0.02129,0 -0.167782,-0.1573093 -0.325529,-0.3495763 -0.157747,-0.1922669 -0.301778,-0.3670682 -0.32007,-0.3884479 -0.01874,-0.021903 -0.121721,0.043386 -0.235912,0.1495653 -0.111459,0.1036402 -0.293226,0.2530724 -0.403925,0.3320716 -0.1106991,0.078999 -0.2011648,0.1547034 -0.2010351,0.1682313 1.271e-4,0.013528 0.1076995,0.1580712 0.2390431,0.3212068 0.131344,0.1631355 0.276129,0.3585805 0.321746,0.4343225 0.04562,0.07574 0.09369,0.137711 0.106824,0.137711 0.01314,0 0.115892,-0.05904 0.228346,-0.131202 z M 8.6182007,9.9415441 C 9.9486931,9.6021441 11.015385,8.5572424 11.395014,7.2214564 11.50965,6.8180907 11.551209,6.0320333 11.48093,5.5963824 11.215851,3.9531648 9.9235105,2.6608242 8.2802927,2.3957447 7.8514418,2.3265636 7.0580436,2.367084 6.6690482,2.4780341 5.8004902,2.7257661 4.9854699,3.3049342 4.488075,4.0278729 3.9911593,4.7501152 3.7356112,5.8017865 3.8487236,6.6590314 c 0.1981738,1.5019004 1.1925024,2.7187648 2.6084602,3.192247 0.2097457,0.070137 0.5052966,0.1465165 0.6567796,0.1697326 0.3916243,0.06002 1.1052115,0.02232 1.5042373,-0.079467 z" />
    </svg>
    </div>
    <div id="pie" class="pie">
    <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 20 24" width="20" height="24">
    <path style="fill:#ffffff" d="M 11.514979,6.2022873 A 3.8401398,3.8401398 0 0 1 7.6748391,10.042427 3.8401398,3.8401398 0 0 1 3.8346993,6.2022873 3.8401398,3.8401398 0 0 1 7.6748391,2.3621475 3.8401398,3.8401398 0 0 1 11.514979,6.2022873 Z" />
    <path style="fill:#e65100" d="m 7.6748391,2.3621475 c 2.1208512,-2e-7 3.8401399,1.719289 3.8401399,3.8401398 0,2.1208508 -1.7192887,3.8401397 -3.8401399,3.8401397 z"/>
    </svg>
    </div>
    <div id="title" class="title">Title</div>
    <div id="menu_button" class="menu-button"> <img id="menu_image" src="https://i.imgur.com/l6GysYf.png">    </div>
    </div>
    <div id="display" class="display">
    <div id="speech_bubble" class="speech-bubble">
    <div id="logo_animation" class="logo-animation" data-flip-id="logo">
    <img id="logo_animation_image" src="https://media0.giphy.com/media/Z1oYdpUd9Txyop1jdH/giphy.gif?cid=790b7611436e68e9fdddc32ce5e4e6c3a4730caba6ef8f0c&rid=giphy.gif&ct=s">
    </div>
    </div>
  </body>
  </html>

Answer 2

从这两个文件中创建了一张图片，优化并可以删除不必要的代码。

Date()

* {
  outline: none;
  opacity: 1;
  -webkit-box-sizing: border-box;
  -mo-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  position: fixed;
  height: 100%;
  background-color: #26004b;
  font-size: 2vh;
  margin: 0 auto;
  font-family: open_sans;
}

.screen {
  position: absolute;
  height: 100%;
}

.menu-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* changed */
  position: relative;
  height: 13.714%;
  width: 100vw;
  top: 0%;
  text-align: center;
}


/* .pie { can remove
  grid-column: 1/2;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 50%;
  right: 50%;   
  top: 50%;
  bottom: 50%;
  transform: translate(-50%, -50%);
  padding-top: 3%;
  padding-bottom: 14%;
  padding-right: 5%;
  padding-left: 1%;
  z-index: -1;
} */

.logo,
.logo-animation {
  grid-column: 1/2;
  position: relative;
  height: 100%;
}

.logo img,
.logo-animation img {
  position: absolute;
  /* height: auto; can remove*/
  max-height: 90%;
  max-width: 90%;
  left: 50%;
  /* right: 50%; can remove */
  top: 50%;
  /* bottom: 50%; can remove */
  transform: translate(-50%, -50%);
}

.logo-animation {
  display: none;
}

.title {
  grid-column: 2/3;
  position: relative;
  color: #f5f5f5;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-family: hack;
  font-size: clamp(2vw, 8vw, 10vh);
  display: flex;
  top: 0%;
}

.menu-button {
  grid-column: 3/4;
  position: relative;
  height: 100%;
}

.menu-button img {
  position: absolute;
  height: auto;
  max-height: 75%;
  max-width: 75%;
  left: 50%;
  right: 50%;
  top: 50%;
  bottom: 50%;
  transform: translate(-50%, -50%);
}

.display {
  position: relative;
  height: 86.286%;
  width: 100vw;
}

.speech-bubble {
  display: grid;
  grid-template-rows: 80% 0% 20%;
  position: relative;
  background-color: #f5f5f5;
  height: 61.8%;
  width: 90vw;
  margin: auto;
  border-radius: 2em;
  padding-bottom: 1em;
}

.speech-bubble:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 15vw;
  width: 0;
  height: 0;
  border: 4em solid transparent;
  border-top-color: #f5f5f5;
  border-bottom: 0;
  margin-left: -2em;
  margin-bottom: -2em;
  z-index: -1;
}

将一个 div 与另一个完美对齐

2 个答案: