携帯電話の位置を含めて縦横比を維持する方法は？ CSSコード

Question

私は、PC上でうまく動作する回転ホイールを持っていますが、サイズ、位置、および私が携帯電話でそれを試しているときにほとんどすべてを変更します。

また、スピンホイールの中央に画像があり、電話機にもそこにとどまるはずです。ここ

が回転輪である：

ここコードである：

.image { 
 
    position: absolute; 
 
    left: 30%; 
 
    width: 300px; 
 
    height: 300px; 
 
    -webkit-animation:spin 10s linear infinite; 
 
    -moz-animation:spin 10s linear infinite; 
 
    animation:spin 10s linear infinite; 
 
\t animation-timing-function: ease-in-out; 
 
\t -webkit-animation-timing-function:ease-in-out; 
 
\t -moz-transition-timing-function:ease-in-out; 
 
\t 
 
\t animation-play-state:paused; 
 
} 
 
@-moz-keyframes spin { 100% { -moz-transform: rotate(1770deg); } 
 
\t \t \t \t \t \t } 
 
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(1770deg); } } 
 
@keyframes spin { 100% { -webkit-transform: rotate(1770deg); transform:rotate(1770deg); } }

<h1 id='pas'>Pasul 3: Incercati-va norocul la ruleta cu cadouri! </h1> 
 
<h2> Aflati instant ce ati castigat invartind roata!</h2> 
 
<br> 
 
<br> 
 
<br> 
 
<div style='position: relative; left: 0; top: 0;'> 
 
    <img class='image' src='images/ruleta.png' alt='' id='rlt' width='120' height='120'> </img>//this is the wheel 
 
    <img id='schimba' src='images/iph.png' width='64px' height='64px' style='position: absolute; top: 117px; left: 45%;'></img><img id='arrow' src='images/arrow.png' width='70px' height='70px' style='position: absolute; top: 300px; left: 48%;'></img> 
 
</div> //this is the image in center of the wheel 
 

 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Answer 1

これは中心アイテムを保持するためにフレキシボックスを使用するための良い候補であるが、しかし、基本的に問題はあなたが含まれているようにしたいということです。divホイールのサイズと中心（フレックスボックスまたはmargin: 0 autoを使用して、絶対位置を使用して内側の画像を中心にセンタリングします）。フレックスボックスの例はこちらhttp://codepen.io/JustH/pen/rLYgQX

<br>タグをレイアウトに使用しないでください。マージンまたは位置を使用して、必要な間隔を確保します。