images in a row with hardcoded height, look bad when zoomed in

[nikocraft]

Bug description

Images in a row do not look correctly when zoomed, they look croped and with wrong proportions.

How to reproduce

html markup
img src="/uploads/2019/11/25/img_01.jpg" class="lightbox"
img src="/uploads/2019/11/25/img_02.jpg" class="lightbox"
img src="/uploads/2019/11/25/img_03.jpg" class="lightbox"

img css
img
object-fit: cover;
height: 300px; <--- this seems to be causing the issue
width: 100%;
margin-left: auto;
margin-right: auto;
border: 0px solid transparent;
border-radius: 0px;

Expected behavior

Image real size is respected and image is viewed correctly.

Reproducible example

https://codesandbox.io/s/medium-zoomvanilla-example-pz2ys

Reason

it seems that sole reason is because I override img height in example with hardcoded height for images in a row, and this throws off this plugin and when zooming images look bad and not correct. If I comment out height: 300px from my example above then the plugin works, but images in a row all lined up are not possible anymore which is requirement for a gallery of images. I hope this can be fixed?

Environment

Chrome, Edge

My Results

If I remove height for images in gallery then the gallerylooks like this

Below is result with medium-zoom now with correct image ratio. However I can't allow galleries to look like above, I need to control the heigth of images, which in turn throws off your really wonderful plugin that I hoped to use.

Can you fix this? I need to know if issue will be taken care. I need to make a decision in next couple of days I am going use this package in my CMS or not. I hope the author takes some time to answer. I'm prepared to compensate him with $ for a quick fix.

[francoischalifour]

Hey there – a way for Medium Zoom to understand which height to reset is to change the way the style is applied to the image. Do not apply the style with .images-block-image img but rather attach a class to the images themselves.

You can find a working example in this sandbox.

The reason why you don't want to target the image with .selector img is because Medium Zoom is unable to detect and remove this class to compute its zoomed size. If you attach the CSS class directly to the image, Medium Zoom is aware of where the style is coming from and can therefore reset it when zooming.

Let me know how it goes!

[nikocraft]

@francoischalifour

I did what you suggested, the image that pops up is slightly better but your plugin clips it now, its not whole.

while this is the real size of the image:

here is some code for you how it looks after I zoom in with the plugin.

Can this be improved or am I stuck with this if I want gallery images with your plugin?

[nikocraft]

@francoischalifour

your example has the same problem. Images real size is not respected, but they are clipped. My hope was that plugin would be able to go from whatever thumbnail size was to real size of the image.

Is this something that would be technically possible with your plugin? If you could do it, what it would cost if I was to compensate you, in case its not a simple fix?

I'd really like to use your plugin. I've got a great CMS on my hands and your plugin could be used on lots of websites built with my CMS.

See preview of it here
https://www.youtube.com/watch?v=pCjZpwH88Z0
And let me know if it would be possible to work with you to correct the above issues. I'll as mentioned compensate you for any additional work if you find it will take a while to correct this.

[stevenjoezhang]

object-fit: cover; is more like the cause of the issue.

medium-zoom/src/utils.js

Line 54 in e082f9b

const { top, left, width, height } = template.getBoundingClientRect()

When the object-fit CSS property is set, the height and width obtained here are not accurate

[aigan]

A partial solution is to remove the special styles when opening:

const zoom = mediumZoom('[data-zoomable]');
zoom.on('open', event => {
	event.target.style.height="auto";
	event.target.style.width="auto";
});
zoom.on('opened', event => {
	event.target.style.height=null;
	event.target.style.width=null;
});

It doesn't animate the clipping, but at least shows the whole image