Image with scroll vertically and height 100%

Asked

Viewed 1,052 times

3

I have the following structure:

<div class="bg">
    <img src="view/img/planta-supermercado.png" id="bg">
    <div class="bg-scroll" id="bg-scroll">
        <img src="view/img/planta-supermercado.png" id="bg-mobile">
    </div>
</div>

when you open the page on mobile, it loads the div with the id bg-scroll

what I need is for the image to be 100% in height and proportional in width (the width is greater than the height)... and for that to happen I must create a horizontal scroll only in the image (or in the div bg-scroll) so that the user can see the whole image.

Thank you!

javascript html jquery css

3 answers

2


Man I didn’t get what you want right. But I believe it’s something like this. 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 cell phone etc. What I did was put a overflow:auto in dad 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>

  • I had put wrong in the publication, that’s exactly what I need, but the bar is horizontal, sorry.

  • Now the scroll horizontal is right, but I want the image to be 100% high, and the width to be the necessary size so as not to lose the ratio

  • as the image is wider, the bar would appear that way you did, just horizontally

  • @Otaviosouzarocha gave an edited again, look there if now it was right

  • That’s right, once again, thank you!!!

  • @Otaviosouzarocha tmj young [] s

Show 1 more comment

1

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

If using viewport makes your job easier. The unit vh basically checks "how much % of the screen" your element will occupy

0

First 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

  • I need the image to be 100% height and the width to be proportional, larger than the screen, and for the user to be able to visualize the entire image, a vertical scroll would appear only in the div with the image

  • The way you did it, the image gets 100% wide, but then it gets small

  • In the way you specified in the first comment, understand that you want it to be proportional in width, so it will generate a horizontal scroll, one of the two requirements does not seem right, either it will have vertical scroll getting 100% width and proportional height or it will have horizontal scroll, getting 100% height and width larger q the screen.

Browser other questions tagged javascript html jquery css

You are not signed in. Login or sign up in order to post.