Position div in relation to an image

2

I'm doing a sort of map in my application, where an image that takes the whole screen has several buttons on it.

Currently,Ipositionthebuttonslikethis:

.btn_padaria{left:75.00%;top:20.25%;}

Inmobile,I'mdoingthesamething,butthebackgroundimageisdifferent,showingaperspectivefromabove

Butinmobile,theheightoftheimageislargerthanthescreen,sotoseethe"crediario" button would have to scroll the screen, but even if I put top:100% on that button, it still is NOT at the end of the image at the bottom of the screen.

    
asked by anonymous 14.05.2018 / 19:28

2 answers

1

You can try to put position:absolute on btn and put bottom:0 on it at the end of the parent element, it is important for the parent to have position:relative for btn to be relative to it.

See a simple example of placement. Note that the parent div has 120vh, or 20% more than the visible screen height.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
div {
    width: 100%;
    height: 120vh;
    background-color: #f00;
    position: relative;
}
.btn {
    width: 100px;
    height: 50px;
    background-color: #fff;
    position: absolute;
    bottom: 5px;
    left: 5px;
}
<div>
    <div class="btn">btn</div>
</div>
    
14.05.2018 / 19:46
0

I was able to solve it in a more "precise" way

I basically used Javascript to get the width of the screen and the image and then I subtract (screen - image). Once I have done this I have the size in pixels of the space that is left on the screen. Divide by two because the image is centered.

Now just take the dimensions of the image, divide by 100, multiply by the percentage that the button (div) will stay on the image, and finally add the remaining value.

  var wid = document.getElementById('img-planta').clientWidth; /*Pega a largura da imagem*/
  var hei = document.getElementById('img-planta').clientHeight; /*Pega a altura da imagem*/
  var w = window.innerWidth; /*Pega a largura da janela*/
  var h = window.innerHeight; /*Pega a altura da janela*/

  var posWid;
  var posHei;
  var auxWid;
  var auxHei;

  auxWid = (w-wid)/2; /*Acha o valor em pixels das sobrar na largura*/
  auxHei = (h-hei)/2; /*Acha o valor em pixels das sobrar na altura*/

  posWid = (wid/100) * 50 + auxWid; /*Calcula o valor em pixel que será aplicado no style left para posicionar o botão*/
  posHei = (hei/100) * 70 + auxHei ; /*Calcula o valor em pixel que será aplicado no style top para posicionar o botão*/
  document.getElementById('btn_deposito').style.left = posWid + "px"; /*Seta o style da div*/
  document.getElementById('btn_deposito').style.top = posHei + "px";/*Seta o style da div*/
    
16.05.2018 / 14:10