CSS resize of image in fluid lightbox container

Question

Short version: Make the image fit nicely the visible area for small windows, starting from this fiddle

Update: There doesn't seem to be a solution for this issue. I thought there might be one because Chrome actually makes it possible (see my answer) but behavior is different in other browsers.

Longer version:

I'm working on a lightweight fluid lightbox and have an apparently simple CSS issue I can't resolve.

I want the content (a single image) to be downsized if needed to fit, while keeping the aspect ratio the same.

Here's a demo fiddle: http://jsfiddle.net/3a9y9/2/ . Resize the window so the image doesn't fit height wise.

It almost works, but the height given to the image is slightly more than what's actually visible so a bit of the bottom gets clipped. I've tried tweaking things to no avail; I wish I understood how come the available height is too high.

Maybe it's related, but IE 9 doesn't even maintain the aspect ratio with this attempt of a solution. Also, Chrome behaves strangely when resizing the window and clicking on run in the fiddle will sometimes redraw differently.

What's the solution?

It's no problem to wrap the <img> in a <div> or two if it's necessary, but the top-level structure should ideally remain the same (i.e. a .featherlight-content inside a .featherlight and that's it).

Answer 1

In featherlight.min.css, change .featherlight-image{width: 100%} to .featherlight-image{max-width: 100%}

and at the end, write the following css:

@media only screen and (min-height:1000px) {
    .featherlight-image { height: 900px; }
}
@media only screen and (min-height:700px) {
    .featherlight-image { height: 600px; }
}
@media only screen and (max-height:700px) {
    .featherlight-image { height: 400px; }
}

What it's doing is changing the width of the lightbox from fixed 100% into a maximum of 100% (so that it's adjusted as per height). And then with @media, the height of the image is restricted. @media will allow for responsiveness based on browser height.

Higher resolution browsers will show the image at 900px height; those with a minimum of 700px height will show it at 600px, and smaller ones will show it at 400px.

You can of course adjust the numbers as per your preference; but this solution worked and solves the problem of long images.

Here's a jsfiddle. Note that using data-featherlight="image" is important for this to work properly.

Hope it helps.

Answer 2

In my opinion, the easiest way to both fit an image in the container and to center it is absolute positioning with margin: auto:

.featherlight img {    
    max-width:90%;
    max-height:90%;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
}

(Fiddle)

Alternatively, you can try to set the size of the image in viewport relative units (vw/vh), they have quite good browser support now: http://caniuse.com/#search=vw