2. The size and position of the image looks different on each screen

Question

I have looked at the previously answered topics on the site. I could not adjust. Although I've set the size and location in the css file. The big visual is right in the middle and it becomes suitable for the screen. Imaged1 class I have given a small visual display in different places and different sizes. Can the codes help?enter image description here

.imaged1 {
    position: absolute;
    top: 80px;
    left: 240px;
    width: 65px;
    height: 65px;
    margin: 0 auto;
    -webkit-animation: spin 15s linear infinite;
    -moz-animation: spin 15s linear infinite;
    animation: spin 15s linear infinite;
    bottom: auto;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

 <img class="center" img src="https://i.ibb.co/BsDB7nW/1.png">
 <img class="imaged1" src="https://i.ibb.co/7p3bYLN/d1.png">

enter image description here

Khurram Ishaque · Answer 1 · 2019-03-21T09:42:31.877

Following code may help you:

    <div style="text-align: center;position: relative;width:50%;">
       <img class="center" img src="https://i.ibb.co/BsDB7nW/1.png">
         <img class="imaged1" src="https://i.ibb.co/7p3bYLN/d1.png">
    </div>

    .imaged1 {
    position: absolute;
    top: 36%;
    left: 40%;
    width: 19%;
    margin: 0 auto;
    -webkit-animation: spin 15s linear infinite;
    -moz-animation: spin 15s linear infinite;
    animation: spin 15s linear infinite;
    bottom: auto;
   }
   @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
   @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
   @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
  .center {
   display: block;
   width: 100%;
   }

Please check this fiddle for my best guess what you require

And here is the previously asked question

2. The size and position of the image looks different on each screen

1 Answers1