调整窗口大小时如何保持对象大小相同

Question

我的圆圈每隔一段时间就会增加宽度，一旦达到比例，它就会消失并重新开始。 但是，每次淡入淡出时，都会resize屏幕resize或zoom in and out ，圆圈变成oval或真正stretched对象。 当屏幕调整大小时，如何保持一个圆圈。

HTML

<div id="container">
    <div id="name-div">
        <h1 id="name">Open Touch</h1>
    </div>
    <ul class="bubbles">
        <li id="firstCircle"></li>
        <li id="secondCircle"></li>
        <li id="thirdCircle"></li>
        <li id="fourthCircle"></li>
        <li id="fifthCircle"></li>
        <li id="sixthCircle"></li>
    </ul>
</div>

的CSS

.bubbles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
}

.bubbles li {
    position: absolute;
    list-style: none;
    display: block;
    border-radius: 100%;
    -ms-animation: fadeAndScale 33s ease-in infinite;
    -webkit-animation: fadeAndScale 33s ease-in infinite;
    -moz-animation: fadeAndScale 33s ease-in infinite;
    -o-animation: fadeAndScale 33s ease-in infinite;
    animation: fadeAndScale 33s ease-in infinite;
    transition-timing-function: linear;
}
/* The first Circle animation------------------------------------------------------------------------------------------------ */
.bubbles li:nth-child(1) {
    width: 9%;
    height: 20%;
    top: 20%;
    left: 20%;
    background-image: linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%);
    animation-name: firstCircle;
}
/* Mozilla First Circle Animation */
@-moz-keyframes firstCircle {
    0% {
        z-index: 100;
        -moz-transform: scale(0);
    }
    100% {
        z-index: 0;
        -moz-transform: scale(200);
    }
}
/* Webkit First Circle Animation */
@-webkit-keyframes firstCircle {
    0% {
        z-index: 100;
        -webkit-transform: scale(0);
    }
    100% {
        z-index: 0;
        -webkit-transform: scale(200);
    }
}
@-ms-keyframes firstCircle {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}
@-o-keyframes firstCircle {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}
/* End first circle animation -------------------------------------------------------------------------------------- */\

/* Begin Second Circle Animation ------------------------------------------------------------------------------------ */
.bubbles li:nth-child(2) {
    width: 9%;
    height: 20%;
    position: absolute;
    left: 40%;
    top: 40%;
    animation-name: secondAnimation;
}
/* Webkit Second Animation */
@-webkit-keyframes secondAnimation {
    0% {
        z-index: 100;
        -webkit-transform: scale(0);
    }
    100% {
        z-index: 0;
        -webkit-transform: scale(200);
    }
}
/* Mozilla Second Animation */
@-moz-keyframes secondAnimation {
    0% {
        z-index: 100;
        -moz-transform: scale(0);
    }
    100% {
        z-index: 0;
        -moz-transform: scale(200);
    }
}
/* Ms Second Animation */
@-ms-keyframes secondAnimation {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}
@-o-keyframes secondAnimation {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}
/* End of Second Circle ------------------------------------------------------------------------------------- */

/*Begin of Third Circle ----------------------------------------------------------------------------------- */
.bubbles li:nth-child(3) {
    width: 9%;
    height: 20%;
    position: absolute;
    left: 60%;
    top: 10%;
    animation-name: thirdAnimation;
}
/* Webkit Third Animation */
@-webkit-keyframes thirdAnimation {
    0% {
        z-index: 100;
        -webkit-transform: scale(0);
    }
    100% {
        z-index: 0;
        -webkit-transform: scale(200);
    }
}
/* Mozilla Third Animation */
@-moz-keyframes thirdAnimation {
    0% {
        z-index: 100;
        -moz-transform: scale(0);
    }
    100% {
        z-index: 0;
        -moz-transform: scale(200);
    }
}
/* MS Third Animation */
@-ms-keyframes thirdAnimation {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}
@-o-keyframes thirdAnimation {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}
/* End of the Third Circle --------------------------------------------------------------------------------------------------------- */

/* Begin of Fourth Circle Animation ----------------------------------------------------------------------------------------------- */
.bubbles li:nth-child(4) {
    width: 9%;
    height: 20%;
    position: absolute;
    left: 10%;
    top: 60%;
    animation-name: fourthAnimation;
}
/* Webkit Fourth Animation */
@-webkit-keyframes fourthAnimation {
    0% {
        z-index: 100;
        -webkit-transform: scale(0);
    }
    100% {
        z-index: 0;
        -webkit-transform: scale(200);
    }
}
/* Mozilla Fourth Animation */
@-moz-keyframes fourthAnimation {
    0% {
        z-index: 100;
        -moz-transform: scale(0);
    }
    100% {
        z-index: 0;
        -moz-transform: scale(200);
    }
}
/* MS Fourth Animation */
@-ms-keyframes fourthAnimation {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}
@-o-keyframes fourthAnimation {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}
/* END of Fourth Animation ------------------------------------------------------------------------------------------------ */

/* Start of Fifth Animation -------------------------------------------------------------------------------------------------- */
.bubbles li:nth-child(5) {
    width: 9%;
    height: 20%;
    position: absolute;
    left: 50%;
    top: 10%;
    animation-name: fifthAnimation;
}
/* Webki Fifth Animation */
@-webkit-keyframes fifthAnimation {
    0% {
        z-index: 100;
        -webkit-transform: scale(0);
    }
    100% {
        z-index: 0;
        -webkit-transform: scale(200);
    }
}
@-moz-keyframes fifthAnimation {
    0% {
        z-index: 100;
        -moz-transform: scale(0);
    }
    100% {
        z-index: 0;
        -moz-transform: scale(200);
    }
}
@-ms-keyframes fifthAnimation {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}
@-o-keyframes fifthAnimation {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}
/* End of the Fith Circle ----------------------------------------------------------------------------------------------------- */

/* Start of the Sixth Circle ------------------------------------------------------------------------------------------------- */
.bubbles li:nth-child(6) {
    width: 9%;
    height: 20%;
    position: absolute;
    left: 80%;
    top: 60%;
    animation-name: sixthAnimation;
}
/* Webkit sixth animation */
@-webkit-keyframes sixthAnimation {
    0% {
        z-index: 100;
        -webkit-transform: scale(0);
    }
    100% {
        z-index: 0;
        -webkit-transform: scale(200);
    }
}
/* Mozilla Sixth Animation */
@-moz-keyframes sixthAnimation {
    0% {
        z-index: 100;
        -moz-transform: scale(0);
    }
    100% {
        z-index: 0;
        -moz-transform: scale(200);
    }
}
/* MS Sixth Animation */
@-ms-keyframes sixthAnimation {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}
@-o-keyframes sixthAnimation {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}

Answer 1

与其以% width和height ， px以px 。 更改以下行：

width:100%;
height: 100%;

至

width:100px;
height: 100px;

然后再试一次。

说明：当您以%为单位使用height和width时，这些属性取决于容器，即您的情况下的window ，但是如果以px为单位提供这些属性，则无论容器高度的宽度如何，该属性都将保持不变。

Answer 2

如果您的问题是我认为的，您可以使用此方法：

width:100vw;
height: 100vh;

您的div将获得窗口的确切大小