Исправить положение изображения - PullRequest
Новая
       17

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

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

У меня ограниченные знания об этом, поэтому я, вероятно, борюсь.

Я пытаюсь добавить изображение, которое будет ссылаться на учетную запись Twitter в биографии, используя следующий код: 

<a href="https://twitter.com/UserName" target="_blank">
<img style="position:absolute;left:33.75%;bottom:-71.5%; width:65px; height:65px;" 
src="https://i.imgur.com/AAA111.jpg" target="_blank"></a>

Это прекрасно работает, но только если развернут Chrome на моем мониторе.Если я зайду на другой компьютер или уменьшу окно и т. Д., Изображение не будет оставаться в фиксированном положении и вместо этого переместится в случайное место на странице.

Как это исправить?

Заранее спасибо

Ответы [ 3 ]

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

Это означает, что он не отвечает.Попробуйте добавить медиа-запросы для изображения

Пример 

@media only screen and (max-width: 600px) {
  img{
    width:50%
     height: 50%
  }
}
0 голосов
/ 03 марта 2019

С помощью приведенного ниже фрагмента кода изображение будет отцентрировано по горизонтали и вертикали на экране независимо от размера экрана.Вы можете просто позиционировать изображение с помощью CSS ниже.При такой настройке, независимо от того, где вы располагаете изображение, оно должно оставаться в основном в этой позиции независимо от размера экрана.

Вы можете проверить мой код, запустив сниппет, сделав его полноэкранным и поиграв с размером экрана.Изображение всегда будет оставаться в центре.Опять же, вы можете настроить значения, чтобы настроить положение, как вам это нужно.Надеюсь, это поможет! 

.wrapper {
  min-height: 100vh;
  width: 100%;
  position: relative;
}

.wrapper img {
  width: 65px;
  height: auto; /* Or 65px, whatever you need it to be. */
  position: absolute;
  
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* This will place it in the middle */
}
<div class='wrapper'>
  <a href="https://twitter.com/UserName" target="_blank">
  <img src="https://i.imgur.com/AAA111.jpg" target="_blank"></a>
</div>
0 голосов
/ 03 марта 2019

Вы пытаетесь% Изменить высоту: 50% и ширину: 50% <a href="https://twitter.com/UserName" target="_blank"> <img style="position:absolute;left:33.75%;bottom:-71.5%; width:50%; height:50%" src="https://i.imgur.com/AAA111.jpg" target="_blank"></a>

...