zoom violates aspect ratio
Closed this issue · 2 comments
Description
The zoom plugin violates the aspect ratio of the original image. I can't understand the reasons. In the lightbox the image is displayed at 627627 px, aspect ratio 1:1. When I activate zoom, the image is stretched disproportionately, becomes 1000627 px, aspect ratio 1000:627. The image looks stretched in width.
Steps to reproduce
[Clear steps describing how to reproduce the issue. Please link to
a demo project (Your website URL, codepen, or jsfiddle) if possible.](https://elloi.ru/bahroma-anka-5302-9382)
To see the problem, follow the link, open the image in the lightbox and click on the zoom button.
JS code that you use to initialize lightGallery.
var dynamicGallery = lightGallery(document.getElementById('gallery'), {
dynamic: true,
dynamicEl: galleryImgs,
index: parseInt(document.getElementById('gallery').dataset.slickIndex, 10) || 0,
plugins: [lgZoom, lgThumbnail, lgVideo],
download: false,
thumbnail: true,
loadYouTubePoster: true,
loadYoutubeThumbnail: true,
autoplayVideoOnSlide: true,
thumbWidth: 80,
thumbContHeight: 100,
thumbMargin: 10,
youTubePlayerParams: {
autoplay: 1,
modestbranding: 1,
controls: 1,
rel: 0,
showinfo: 0
},
mobileSettings: {
controls: true,
showCloseIcon: true
}
});
dynamicGallery.openGallery();
});
Sample HTML markup
Additional context
The problem occurs on line 321-323 of the file code lg-zoom.umd.js
$image .css('width', $image.get().naturalWidth + 'px') .css('height', $image.get().naturalHeight + 'px');
Figured it out, I had to connect all the plugin styles.