Image with vertical scroll and height 100%

Dude, I did not quite understand what you want. But I think it's something like that. But if it's not exactly that, it's just a touch.

OBS: Here I used small values to simulate that you are on a mobile phone. What I did was put a overflow:auto in the parent div basically.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.bg {
    width: 20vw;
    height: 100vh;
    overflow-y: hidden;
    overflow-x: auto;
    background-color: #f00;
}
    
.bg img {
    display:block;
    min-height: 100vh;
    width: auto;
}

<div class="bg">
    <!-- <img src="view/img/planta-supermercado.png" id="bg"> -->
    <div class="bg-scroll" id="bg-scroll">
        <img src="http://placecage.com/300/100"id="bg-mobile">
    </div>
</div>

.bg {
   width: 100%;
   height: 100vh;
}

If you are using viewport it makes your work easier. The vh unit basically checks "how many% of the screen" your element will occupy

First the css for your image:

#bg-mobile{
  position: relative;
  width: 100%;
  margin:0;
  padding:0;
}

Now the div:

#bg{
  position: relative;

}

With this css your div will be in bg