2. Размер и положение изображения выглядят по-разному на каждом экране - PullRequest
Новая
       24

2. Размер и положение изображения выглядят по-разному на каждом экране

0 голосов
/ 21 марта 2019

Я посмотрел ранее отвеченные темы на сайте. Я не мог приспособиться. Хотя я установил размер и местоположение в файле CSS. Большой визуальный элемент находится прямо посередине, и он становится подходящим для экрана. Класс Imaged1 Я дал небольшой визуальный дисплей в разных местах и ​​разных размеров. Могут ли помочь коды? введите описание изображения здесь 

.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">

введите описание изображения здесь

введите описание изображения здесь

1 Ответ

0 голосов
/ 21 марта 2019

Следующий код может вам помочь: 

    <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%;
   }

Пожалуйста, проверьте эту скрипку, чтобы я догадался, что вам нужно

А вот и ранее заданный вопрос

...