Img smaller than the screen

[emilevictorportenart]

When the picture is smaller than the screen, there is a weird effect and the picture is not accessible anymore.

Do you get the same bug?

Thanks

[lluisandreu]

I had the same issue, but then I realised that all my img tags had the "max-width:100%" style, unsetting this fixed my problem.

[emilevictorportenart]

Thanks for letting me know. It works well now ;-)

It maybe should be good to override it by desfault?

[gsarig]

I too noticed a similar behavior on images that have big width and small height (smaller than the browser window height). When I removed max-width it worked fine in Firefox and Chrome, but the problem persisted in IE (tested in IE11). I didn't want to completely remove max-width:100% anyway, because it could cause problems in other parts of my website.

When I removed the max-width and set the height to 100%, it was working on all browsers, but it was messing with all the other images that had bigger height and smaller width.

Eventually I came up with a not so elegant workaround by inserting a class to the fullscreen image, only if it's height was smaller than it's width. More specifically, i added:

  if( (window.innerWidth / window.innerHeight ) < (target.width / target.height) ) {
    target.className = target.className + 'maxwidth-fix';
  }

in the intense.js and then added the following css in my css file:

.maxwidth-fix { max-width: none; height: 100%; }

So far I haven't noticed any negative side-effects and it seems to work fine in Firefox, Chrome and IE11.

[tholman]

Yeah, it looks like this is caused again, by people setting styles in their css on global elements (like img) ... nothing really, that I want to stop them though.

[lmartins]

I know this has been closed a long time ago, but there are valid use cases to set reset rules in elements like the img tag. For cases like those, having a classname applied to the figure element that is generated by the plugin would be extremely useful.