창 크기를 조정할 때 개체 크기를 동일하게 유지하는 방법

간격에 따라 너비가 증가하는 원이 있고 일단 크기에 도달하면 원이 사라지고 다시 시작됩니다. 그러나 내가 화면을 resize으로 희미해질 때마다 또는 zoom in and out 원이 oval 또는 실제로 stretched 개체로 바뀝니다. 화면의 크기가 조절되면 원 (원)을 어떻게 유지합니까? 대신 %에 width 및 height 제공의창 크기를 조정할 때 개체 크기를 동일하게 유지하는 방법

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

는 px에 사용합니다.

width:100%; 
height: 100%;

width:100px; 
height: 100px;

에 다시 시도 : 행 다음에 변경합니다.

설명 : 당신이 height 및 %에서 width를 사용하고, 이들 속성은 귀하의 경우, 즉 window, 컨테이너에 의존하지만 px 이러한를 제공하는 경우 다음 컨테이너 높이의 같은 관계없이 남아 폭.

출처

2017-03-19 01:57:56

와우 난 당신이 개 더 많은 질문을 할 수의 정확한 크기를 얻을 것이다 DIV? – Jagr

내가 네 도움이된다고 생각하면 :) –

글쎄,이 말의 도움으로 고칠 수있다. :) 그리고 두 번째로, 내 애니메이션의 경우 잘 작동하지만 다른 탭을 열고 머물러있는 것이 좋다. 거기에서 1 분 동안 돌아와서 돌아 오면 내 애니메이션은 모두 같은 시간에 시작되며이를 고치려면 새로 고쳐야합니다. 내가 어떻게 고칠 수 있니? 코드 펜 링크 ----> http://codepen.io/anon/pen/Zevrda – Jagr

문제는 내가 당신이 사용할 수있는 생각하는 경우 :

width:100vw; 
height: 100vh;

창

출처

2017-03-19 02:09:00 Aotoki

창 크기를 조정할 때 개체 크기를 동일하게 유지하는 방법

답변

관련 문제