Good afternoon, there is an IMG c position: relative; and the parameters top and left are set. But when you increase the screen, the position of the picture changes, and you need to prescribe something so that the position changes depending on the resolution. Writing top and left for each screen resolution is not particularly good, so I think you can do it in javascript, could anyone help with this?

I will give an example code:

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

Here, in my resolution, 1280x1024 will be normally shown, and at a resolution of 1440, for example, another one, and in order not to assign a value to each resolution, you can make a javascript code that, if you increase the resolution by 1 pixel, will move the image by 1 pixel?

Photos from the site: enter image description here enter image description here

    2 answers 2

     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;

    It will result in a 1px offset when the screen size changes to 1px.

    But for good they don’t. The similar problem is solved by competent styles and layout.

      To do this, use Responsive Grids. If I understood correctly, here is an example.

       <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>
      • Thanks, The fact is that the picture itself is in the resolution of 3323x1733, and you need to place it in the center and enlarged, as in the example (Monitor resolution 1280x1024). And when you increase the resolution so that the picture itself changes, it adapts. I also forgot to mention - under the image is a slider, and in the code it's all like this - div slider then div img and the image is assigned position: relative; and z-index to be on top - Constantine
      • Tried to position with the help of width and @media ? - embarq