0

I have a div with an image in it. The image is larger than the size of the view port. So I end up with scroll bars both vertically and horizontally. I'd like to just have the picture in the div and have the browser ignore whatever overflows without showing scroll bars.

I've tried setting overflow to hidden but that doesn't work for me.

This my html:

<div id="outerdiv">
  <div id="innerdiv">
    <img src="my_pic.jpg">
  </div>
</div>

And this is my css:

#outerdiv {
   overflow:hidden;
   width: 100%;
   height: 100%
}

fiddle for it

John
  • 1,310
  • 3
  • 32
  • 58
  • Could you replicate this in a fiddle? – Nick Zuber May 06 '16 at 20:12
  • 2
    height:100% requires a parent with an height set, else it is 100% of nothing ... could be missing `html,body{height:100%}`so windows height can be the reference – G-Cyrillus May 06 '16 at 20:13
  • I've created a fiddle but I don't know how to link it. I've never used fiddle before. I just signed in and created it. – John May 06 '16 at 20:32

3 Answers3

1

Where did you set the overflow? If you set the width of the outerdiv and innerdiv, then give innerdiv "overflow:hidden;" then the picture will overflow but not scroll. You'll have to set the height of innerdiv to control vertical scrolling.

James Hamann
  • 842
  • 6
  • 12
  • I set the overflow to hidden on the inner div and the horizontal scroll bar went away but the vertical one is still there. – John May 06 '16 at 20:44
  • yes. I mentioned that in the last part of my answer. You'll need to set the height of the innerdiv to control vertical scrolling. How tall do you want it to be? If you want some flexibility, you can use max-height. Overflow obeys the dimensions of the container, and by default there is no height set. – James Hamann May 06 '16 at 20:46
  • OK, I finally got it. I'm not sure which thing fixed it because I've changed so much, but what it came down to was that I forgot a semi colon on the width line of my css and so it wasn't working properly. after fixing that it started working correctly. So I'll give this answer the credit because I think this is what ultimately worked. Thanks. – John May 06 '16 at 20:48
  • Glad to help, Good luck! – James Hamann May 06 '16 at 20:51
0

Set your body to have height of 100% 

body,html{
 height:100%;
}
Nakib
  • 4,593
  • 7
  • 23
  • 45
0

add this style to the image

max-width:100%;
max-height:100%;

and set whatever height and width you want for the inner div

El 9ar9ni
  • 138
  • 6