images in a row with hardcoded height, look bad when zoomed in about medium-zoom

[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