We Keep Coding

How to resize an image to fit the remaining window below a container?

I've read through How to resize an image to fit in the browser window?
but it doesn't really fit my need. All there is written for the image to fill the entire browser window. But I want a container of varying height above the image. And a fixed height section below.
JavaScript can get the height of the container. I found:
var offsetHeight = document.getElementById('topsection').offsetHeight;
Andrew Beals's solution on that page looks like a start, but how to subtract the container height, and say 2em for under? I know no JavaScript, so I'd much appreciate some help.

Make a tall image responsive with snap scrolling

I have a high resolution image I want to use for a simple yet responsive "coming soon page." The image is 3 times taller than it is wide and itself contains a logo and some centered text strewn across three panes as in this example.
To make this webpage work on both large and small screens it would be great to
Auto resize the image height to 3 times the browser height
Maintain aspect ratio
Set a minimum image pixel width so that "Widest Text Blurb" is never cutoff
Allow the image to overflow as necessary to accomplish 1. without creating a horizontal scroll bar
It would be awesome to scroll snap between panes.
Parts Of The Solution
In the beginning I was using vw or vh on width or height settings but perhaps I should be scaling to something other than the viewport.
Aspect ratio is maintained by specifying the width, or the height, but not both,
Just use CSS min-width
This SO post and answered fiddle help but breaks when I try scaling the image.
I've experimented with cutting the image into 3 different images and placing them in divs in this scroll snap demo but the panes end up overlapping. Scrolling wouldn't necessarily have to show an entire pane but should snap to the horizontal center of a pane
How can I mix the partial solutions above (or others) to make an image scale as described? I have a ton of failed Fiddles I could share but none of them really give a starting advantage.
UPDATE
The text depicted in the imgr link isn't a placeholder for text that will be in divs but is itself in the image. Apologies for any confusion

Parallax background image that fills container

I'm using stellar.js to apply a parallax effect to a background image. The height of the container around the background image is set by javascript to the window height minus the height of the header. I have the background image set to cover in css and want it to fill the container regardless of the screen size. This works fine with no parallax effect, but once I apply the parallax effect the positioning changes, so when the container is tall the image doesn't fill it.
I spoke to Mark Dalgleish, the creator of stellar.js to see if he had any ideas, and he said that the background image has to be taller than the container for it to fill it, which is pretty much the conclusion I had come to. So I'm wondering if there is a different way I can accomplish this. Does anyone have any ideas?
Here's the site I'm trying to make it work on. If you resize the browser window by pulling it in from the side and reload the page you will see what I mean. There's a gap below the image.
http://sonomarinwebdesign.com/agnitio

I'm not quite sure if this would work but something to try is to add javascript that runs when the page resizes:
$(function() {
$(window).resize(function() {
// replace "100" with whatever makes it the best height:
var newHeight = ($(window).height() - 100);
var pictureHeight = 823;
if (newHeight > pictureHeight) newHeight = pictureHeight;
$(".an-yee-tsee-o.parallax.panel-pane").height(newHeight + "px");
});
});
The point here is that you want to resize the parallax background panel when the window is resized. Even if this isn't quite right, hopefully it gets you on the right track. Best of luck!
Note - I was trying to fix the way the site looks when you load it on a "short" screen and then resize the browser larger. For your issue of the background not filling you can scale your background image up for that in a tool such as gimp for larger screens (or get a larger image to start with).
EDIT - Added code to make sure the div never ends up larger than the picture. You can also run this same code on load. It might not look as originally intended but it should work at least.

I finally solved this by using skrollr.js instead of stellar.js, and then setting the background image to "background-attachment: fixed" in the css. The scripts give a similar effect, but scrollr.js starts with the top offset at 0 so it doesn't leave a gap below the image.

Bxslider variable / incremental width

I'm trying to make a slider (using bxSlider) similar to this one.
It seems the div containing the slider changes its width in equal increments depending on the width of the user's browser. In other words, the div never cuts off the image partially, it always shows the full picture or hides it.
Does anyone know how this works?

You can use media queries
For that you have to know how wide your images are, so you can calculate the width of the slider container.
Just a quick example - your images are 200px wide. So for screens between 800 and 1000px your image container has to be 800px - only 4 images can fit without crop. For screens between 1000 and 1200px - 1000px, so 5 images fit, etc.

Increasing width of element to page width on fixed-width page

I have a site that is a fixed width, within the content area I am displaying a log viewer.
The log viewer is hard to read as it is confined by the fixed width of the site and the log lines are quite long.
What I want to do is above the log viewer have a button that says "Expand", when clicked the log viewer's width would grow to be just slightly less than the size of the viewport.
The rest of the site would still remaine fixed width but the log viewer would be as wide as the screen.
I've drawn an image of what I want to achieve here:
http://imgup.co.nz/3940
I have tried setting "position: absolute; left: 20px" (As well as setting the width) but this causes the footer of my site to move up to be under the log viewer (As the log viewer is no longer increasing the height of the content area).
I'm not sure what to do, it should all be css related I believe.
Any help would be much appreciated!

Try this: http://jsfiddle.net/h4C2p/
EDIT: Sorry, that won't work for different widths. Here is one that works:http://jsfiddle.net/h4C2p/1/

if you don't mind setting a height for the content area, set it for the parent of the element of wherever you show the log.
or, don't wrap everything in one tag. ie. have separate header, content, footer, that normally have the same width and are centered, but when you click expand, the content.. expands