CSS image at 100% in a scrollable division which expands to fill available space

Question

This code shows the image at 100%. The images are too big to be shown at 100% in the space where this code will be inserted, thus I need to show them using scrollbars.

<div style="overflow: auto; margin: auto; margin-bottom: 1em;">
<img src="">
</div>

This code shows the image at 100% with scrollbars within a 500px x 500px division. I don't; however, want a fixed size for the outer division.

<div style="width: 500px; height: 500px; overflow: auto; margin: auto; margin-bottom: 1em;">
<img src="">
</div>

I want to adjust the outer division to act as a picture viewer for seeing full size images with scrollbars.

1. I want the outer division to fill the available horizontal space, which I do not know and will change depending upon the viewer's monitor. The height should auto adjust but not fill the available space as there will be a series of such picture viewer divisions stacked vertically.

2. The images I will be inserting are large and will 99.9% of the time exceed the available space thus I need the scrollbars.

3. I don't want the pictures to be resized to the size of the outer division or vice versa.

4. I can't use any scripts or active content. It must be pure css and html only.

5. I cannot hard code the pixel sizes of the images as a application will be inserting the image code via a loop and the application does not have any ability to insert the image's width or size.

Answer 1

I think you can do this with either an iframe, or using overflow: scroll with 100% width. It's the height you'd need to figure out. I would suggest using media queries maybe for the height.

Here's a sample jsfiddle that I think is pretty close to what you're looking for. Again, your height is what you have to figure out. The parent div will always take up the full height of the children unless you specify.

.image-wrapper {
    width: 100%;
    height: 50vh; /* as suggested below in another answer, or you can use media queries */
    overflow: scroll;
}

<div class="image-wrapper">
    <img src="http://www.spyderonlines.com/images/wallpapers/image/image-20.png">
</div>

https://jsfiddle.net/adpro/bt7aar4b/

Answer 2

Keep the outer wrapper at width: 100% and figure out a height that fits your use case.

For responsiveness, I get it suits you better to select the height based on viewport units so that it doesn't fill or stretch beyond the available height (I am taking 50vh here as an example)

Maybe this also helps you.

Snippet below:

body{
  margin: 0;
}
*{
  box-sizing: border-box;
}
.wrapper{
  overflow: auto;
  border: 1px solid;
  width: 100%;
  height: 50vh; /* adjust / omit this as per your requirement*/
}
.wrapper img{
  display: block;
}

<div class="wrapper">
  <img src="http://placehold.it/1500x1500">
</div>