I want more width on vertical images.....

[tekfunk]

It seems to try to shrink images to fix vertically. This is great for landscape but i have some screenshots of webpages that are very tall and i would like them to fill the width to the max image size and scroll. Is there any way to easily configure this?

[marcandre]

I'm afraid there isn't. I think a hacky way would be to provide an afterContent function that does this.$content.naturalWidth = 0.

I'm wondering if a feature is needed, and if so would it be simply to not resize, or be smarter and not resize when the image ratio is above a certain threshold (or relative to the displaying area's ratio)...

[developer-collin]

Having this same issue. Seems this should be a feature request to allow turning off resizing.

My particular use case is that I'm looking to use a lightbox to showcase full-page screenshots of mobile designs. As a result, the images are very vertical and very long. They absolutely can not be shrunken down or they become illegible. Ideally, they'd simply display to their max size and only shrink on width, then take over the pages vertical scroll.

[dohnutt]

I was having this issue too and came up with a hackish solution. I am not super great at js or even jquery so excuse me if I've got bad code here.

$.featherlight.defaults.afterOpen = function(event) {
    var image = this.$content;
    if ( image.naturalWidth / image.naturalHeight < 0.75 ) {
      image.naturalWidth = 0;
      image.addClass('featherlight-image-tall');
      image.closest('.featherlight').addClass('featherlight-scroll');
    }
  }

And then my .featherlight-image-tall class looks like:

.featherlight-image-tall {
  width: auto !important;
  height: auto !important;
}

It should also be noted that I've also paired this with beforeOpen and afterClose functions that disable scrolling on the html, body elements and enable scrolling on the .featherlight element.

Hope this helps!