如何在調整窗口大小時保持對象大小相同

我有一個在間隔內寬度增加的圓，一旦達到一個比例，它就會消失並重新開始。但是每當我褪色屏幕或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); 
    } 
}

來源

2017-03-19 Jagr

而是在%提供width和height的，在px使用。更改以下行：

width:100%; 
height: 100%;

到

width:100px; 
height: 100px;

，然後再試一次。

說明：當您使用height和%width，那麼這些屬性都依賴於容器上，即window你的情況，但如果你在px提供這些那麼它仍然是容器相同的高度，不論寬度。

來源

2017-03-19 01:57:56

哇，我可以問你兩個問題的確切大小？ – Jagr

如果你認爲我會幫助你，那麼是的，你可以:) –

嗯，我真的只是固定在這個答案的幫助謝謝:)第二，對於我的動畫，它工作正常，但是當我喜歡打開另一個標籤並留下在那裏等待1分鐘，然後回來，所有的動畫都是在同一時間開始的，我不得不刷新以解決問題。我如何解決這個問題。代碼筆鏈接----> http://codepen.io/anon/pen/Zevrda – Jagr

如果你的問題是什麼，我認爲你可以使用這個：

width:100vw; 
height: 100vh;

你的div將得到窗口

來源

2017-03-19 02:09:00 Aotoki

如何在調整窗口大小時保持對象大小相同

回答

相關問題