Fix pictures comment block size

src/scripts/lightbox.js

@@ -8,7 +8,6 @@ export default class Lightbox {
 		this.options = {
 			alwaysShowNavOnTouchDevices: false,
 			fadeDuration: 600,
-			fitImagesInViewport: true,
 			imageFadeDuration: 600,
 			positionFromTop: 50,
 			resizeDuration: 700,
@@ -268,39 +267,63 @@ export default class Lightbox {
 		return height;
 	}
 
+	getMediaSize(media, maxWidth, maxHeight) {
+		if (media.width <= maxWidth && media.height <= maxHeight) {
+			return {
+				width: media.width,
+				height: media.height
+			};
+		}
+
+		const widthRatio = media.width / maxWidth;
+		const heightRatio = media.height / maxHeight;
+
+		if (widthRatio > heightRatio) {
+			return {
+				width: maxWidth,
+				height: Math.round(media.height / widthRatio)
+			};
+		}
+
+		return {
+			width: Math.round(media.width / heightRatio),
+			height: maxHeight
+		};
+	}
+
+	fitSizeWithDataContainer(size, mediaType) {
+		const border = mediaType === 'image' ? this.imageBorderWidth : this.videoBorderWidth;
+		const maxOuterHeight = Math.max(window.innerHeight - this.options.positionFromTop, 1);
+		let fittedSize = size;
+
+		for (let i = 0; i < 5; i++) {
+			const containerWidth = fittedSize.width + this.containerPadding.left + this.containerPadding.right + border.left + border.right;
+			const containerHeight = fittedSize.height + this.containerPadding.top + this.containerPadding.bottom + border.top + border.bottom;
+			const dataHeight = this.getDataContainerHeight(containerWidth);
+			const overflow = Math.ceil(containerHeight + dataHeight - maxOuterHeight);
+			if (overflow <= 0 || fittedSize.height <= 1) break;
+
+			const height = Math.max(fittedSize.height - overflow, 1);
+			fittedSize = {
+				width: Math.max(Math.round(fittedSize.width * (height / fittedSize.height)), 1),
+				height
+			};
+		}
+
+		return fittedSize;
+	}
+
 	updateSize(index) {
 		const media = this.album[index];
 		const maxSizes = this.getMaxSizes(media.width, media.height, media.type);
-		let maxWidth = maxSizes.maxWidth;
-		let maxHeight = maxSizes.maxHeight;
-
-		if (this.options.fitImagesInViewport) {
-			if (this.options.maxWidth && this.options.maxWidth < maxWidth) maxWidth = this.options.maxWidth;
-			if (this.options.maxHeight && this.options.maxHeight < maxHeight) maxHeight = this.options.maxHeight;
-		} else {
-			maxWidth = this.options.maxWidth || media.width || maxWidth;
-			maxHeight = this.options.maxHeight || media.height || maxHeight;
-		}
-
-		let finalWidth;
-		let finalHeight;
-		if (media.width > maxWidth || media.height > maxHeight) {
-			if ((media.width / maxWidth) > (media.height / maxHeight)) {
-				finalWidth = maxWidth;
-				finalHeight = Math.round(media.height / (media.width / maxWidth));
-			} else {
-				finalWidth = Math.round(media.width / (media.height / maxHeight));
-				finalHeight = maxHeight;
-			}
-		} else {
-			finalWidth = media.width;
-			finalHeight = media.height;
-		}
+		const maxWidth = this.options.maxWidth ? Math.min(this.options.maxWidth, maxSizes.maxWidth) : maxSizes.maxWidth;
+		const maxHeight = this.options.maxHeight ? Math.min(this.options.maxHeight, maxSizes.maxHeight) : maxSizes.maxHeight;
+		const size = this.fitSizeWithDataContainer(this.getMediaSize(media, maxWidth, maxHeight), media.type);
 
 		const target = media.type === 'video' ? this.video : this.image;
-		target.width = finalWidth;
-		target.height = finalHeight;
-		this.sizeContainer(finalWidth, finalHeight, media.type);
+		target.width = size.width;
+		target.height = size.height;
+		this.sizeContainer(size.width, size.height, media.type);
 	}
 
 	changeImage(index) {