2.图像的大小和位置在每个屏幕上看起来都不一样答案

【问题标题】：2. The size and position of the image looks different on each screen2.图像的大小和位置在每个屏幕上看起来都不一样
【发布时间】：2019-08-12 00:10:57
【问题描述】：

我查看了网站上之前回答的主题。我无法调整。虽然我已经在 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

【问题讨论】：

标签： css mobile css-position compatibility

【解决方案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

【讨论】：