1

Добрый день, есть IMG c position: relative; и заданы параметры top и left. Но при увеличении экрана, позиция картинки меняется, и надо что-то прописать, чтобы позиция менялась в зависимости от разрешения. Прописывать для каждого разрешения экрана top и left не особо хорошо, поэтому думаю можно в JavaScript сделать, мог бы кто-нибудь помочь с этим?

Приведу пример кода:

.slider-home-map {
  top: -750px;
  left: -380px;
  width: 100%;
}
<img src="/maps-new-home.png" class="slider-home-map" />

Вот в моем разрешении 1280x1024 будет нормально показано, а при разрешении 1440 к примеру уже другое, и чтобы не присваивать каждому разрешению значения, можно сделать javascript код, который при увеличении разрешения на 1 пиксель, будет двигать картинку на 1 пиксель?

Фото с сайта: введите сюда описание изображения введите сюда описание изображения

2 ответа 2

1
baseWidth = 1024 //базовое разрешение, от которого отталкиваемся
baseHeight = 768
width = window.screen.width //разрешение экрана пользователя
height = window.screen.height
img = document.getElementsByClassName('slider-home-map')[0]; //Получаем элемент изображения из DOM документа
img.style.left += baseWidth - width; //к базовому смещению прибавляем разницу
img.style.top += baseHeight - height; 

Получится смещение на 1пкс при изменении размера экрана на 1пкс.

А по хорошему таким не занимаются. Подобная проблема решается грамотными стилями и версткой

1

Для этого используют Responsive Grids Если я правильно понял, то вот пример

<div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6">
        <img src="https://static.pexels.com/photos/92068/pexels-photo-92068.jpeg" class="img-responsive img-thumbnail"/>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6">
        <img src="https://static.pexels.com/photos/92068/pexels-photo-92068.jpeg" class="img-responsive img-thumbnail"/>
    </div>
</div>
2
  • спасибо, Дело в том что сама картинка в разрешении 3323х1733, и нужно ее разместить по центру и увеличенной, как в примере (Разрешение монитора 1280x1024). И при увеличении разрешения чтобы и менялась сама картинка адаптировалась. Еще забыл упомянуть - под картинкой слайдер, а в коде это все вот так - div slider затем div img и картинке присваивается position: relative; и z-index для того, чтобы она была поверх 5 мая 2016 в 11:25
  • Пробовали позиционировать с помошью width и @media?
    – embarq
    6 мая 2016 в 15:50

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.