Heads up – CSS conflict w/img max-height: 100%

Hello!

I just wished to mention this as a comment for the developers – and also for someone trying to troubleshoot this issue.

I have more than a few images on my site that exceed their Bootstrap DIVs, so I have a (almost) sitewide CSS style applied as below (with additional classes to IMG, of course, but of no real importance for this specific explanation).

img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

From what I’ve read, this is a fairly common fix. Granted, perhaps it is not the greatest idea to apply it this broadly across the body of a site, but it really depends on how the site is built.

That said, this didn’t seem to affect Modula until recently – but I discovered that with the last few incarnations (I took a fairly long break from editing the site, so the previous version I was working with may be 6-9 months prior), that applying “max-height: 100%;” to a Modula image in a Custom Grid gallery will cause problems. The images appear to shift calculate about 15% higher in their container than they should, usually squashing their aspect ratio as well.

This speaks more about having code that isn’t site-sweeping, but – again – I wished to put this out here more for anyone who finds themselves with this same issue too.