Wie wird das Seitenverhältnis beibehalten, einschließlich der Position für Telefone? CSS-Code

Question

Ich habe ein Spinnrad, das gut auf dem PC funktioniert, aber es ändert seine Größe, Position und fast alles, wenn ich es auf meinem Handy versuche.

Außerdem gibt es ein Bild in der Mitte des Spinnrads, das auch auf Handys bleiben sollte.

Hier ist das Spinnrad:

Hier ist der Code:

.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

Dies ist ein guter Kandidat Flexbox für das Benutzen von Gegenständen zu halten zentriert, aber im Grunde ist das Problem, dass Sie das enthaltendemachen wollendie Größe des Rades und zentriere es (mit Flexbox oder margin: 0 auto und dann zentrieren Sie die Mitte der Bilder übereinander mit absoluter Positionierung. hier ist ein funktionierendes Flexbox-Beispiel http://codepen.io/JustH/pen/rLYgQX

Für was es wert ist, sollten Sie auch vermeiden, <br> Tags für Layout zu verwenden. Verwenden Sie Ränder oder Position, um den gewünschten Abstand zu erzielen.