[SOLVED] Magnific popup - How can I fit inline content vertically?

Magnific popup - How can I fit inline content vertically?

I'm using magnific popup to display hidden inline content on click. this content has images inside, which have different sizes. Some of those images wont fit vertically in the viewport. Magnific popup has an option to fit content vertically to the viewport verticalFit: true. But it seems that this option works for image galleries only and not for inline content.

Here is a fiddle of that problem.

I need the entire popup to fit vertically in to the viewport, even if the image is bigger. there must be a max-width in pixels, but this is working so far.

There's a CSS in which max-height can be changed but I think magnific popup creates a lot container with heights which are depending on each other. Maybe I have overlooked something and its not a big thing. But now, after doing research and finding nothing, I am running out of ideas.

Solution

It appears that the container heights for the magnific popup are all just set in CSS, and they all appear to just be 100% as far as I can see – and more importantly, I don't see the JavaScript setting any inline heights or widths – so that makes your life easy.

We can just set the max-height on the image as you guessed, and have an automatic width. We can use vh (viewheight) units to set the maximum height of the image relative to the viewport height.

.image img {
  display: block;
  height: 100%;
  width: auto;
  max-height: calc(100vh - 66px);
}

The precise calc value of 66px in the calc expression comes from the height of the description div (.descr), plus 4 pixels top and bottom border on the description, plus 4 more pixels top and bottom border on the image's immediate parent div (.image). That's 50px for the description div + 16 total pixels of border width.

You can make that amount smaller if you want; I believe 100vh - 66px is as big as you can get without needing to scroll at all, at least with the styles given in your fiddle.

You may also want to add some styles to make sure the image is centered in the container in the case of real tall images like this example, but I'll leave that up to you.

Updated fiddle.