2.每个屏幕上图像的大小和位置看起来都不同

Question

我查看了网站上之前回答的主题。我无法调整。虽然我已经在css文件中设置了大小和位置。大视觉正好在中间，它变得适合屏幕。 Imaged1课程我在不同的地方和不同的大小给出了一个小的视觉显示。代码能帮忙吗？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

enter image description here

Answer 1

以下代码可以帮助您：

    <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