Image Distortion

hi @photoman

Can you share a link to your gallery, so that we can see the problem?

The full-site isn’t ready yet but I pushed out a demo page:
https://test2.polskystudios.com/

I can see in the css code that the containing div’s are set to be 100% or 100px (depending on the div). That seems to be a coding bug that is making the assumption that images could not be smaller than 100px in height.

Is there a fix for this without having to hack the pages’ css?

@bradvin – any thoughts on a solution? Thanks!

I had a look at your page and the only image in the gallery was set to 250×200 dimensions, so I cannot see the issue you describe.

Also, can you point to the css that is setting it to 100px, as I cannot find that in dev tools.

Did you advance through the images? The first one is set to be 250×200, but the remaining should scale to their native sizes.

I made notes on the page with visual samples.

It should just work naturally based on the size of the image.

• This reply was modified 4 years, 3 months ago by PhotoMan.

@bradvin I added this ‘hack’ code to the customizer to correct for the misalignment of smaller images so they will appear in the middle. I recommend you update the codebase with this or a similar solution. I was also surprised that you are not using display:flex.

.fbx-item-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 height:auto;
}

Thanks for that suggestion.

I am glad you found a work around in the mean time.

@steveush pls see the above suggestion for inclusion in a future version of FooBox