Please see this FAQ which may help:
My Juicebox gallery shows too much space above or below the main image, how do I fix this?
If your gallery is responsive and its dimensions change depending on the size of the user's browser window, then you essentially have no control over the size and shape of your gallery. Juicebox will, by default, scale images to fit within the gallery's image area (no matter what its size), respecting their aspect ratios and without cropping. If the aspect ratio of the image does not match that of the gallery's image area, then there will be space to the top and bottom or to the left and right of the image.
The easiest ways to avoid this would be to:
(1) Use absolute pixel values (rather than percentages) for the gallery's dimensions and make sure that the aspect ratio of the gallery's image area matches that of the images themselves.
... or:
(2) Change the imageScaleMode (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section) to a value such as 'FILL' so that Juicebox always fills the image area (although please note that cropping may occur).
A further option would be to allow your gallery's dimensions to scale (when the browser window's width changes) but for its aspect ratio to always remain the same. This would require some JavaScript code to resize the gallery, maintaining its aspect ratio when the browser window is resized. (This would not ordinarily happen. If you change the width of your browser window, a div on a web page may have its width altered but not its height.)
Try the following.
Create a sample gallery with JuiceboxBuilder-Pro and use the following code as the gallery's 'index.html' page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style type="text/css">
body {
margin: 0px;
}
#wrap {
width: 100%;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var jb;
function doLayout() {
var windowWidth = parseInt(window.innerWidth ? window.innerWidth : $(window).width(), 10);
var galleryWidth = parseInt(windowWidth * 0.8, 10);
var galleryHeight = parseInt(galleryWidth / 2, 10);
$('#wrap').width(galleryWidth);
$('#wrap').height(galleryHeight);
if (jb) {
jb.setGallerySize(galleryWidth, galleryHeight);
}
}
$(document).ready(function() {
$(window).resize(doLayout);
jb = new juicebox({
containerId: "juicebox-container"
});
doLayout();
});
</script>
<title>Test</title>
</head>
<body>
<div id="wrap">
<div id="juicebox-container"></div>
</div>
</body>
</html>
The '0.8' value is just an arbitrary width for the gallery (80%) for this example. You can change this to whatever you like.
The aspect ratio in the above example is 2:1 (set by the '2' in the line var galleryHeight = parseInt(galleryWidth / 2, 10);).
Again, you can change this to whatever you like.
I hope this points you in the right direction and that you are able to implement a suitable solution into your own web page.