This is a full-page responsive layout where on a desktop, AJAX-ZOOM takes the major part of the window. Unlike in the example22, this example does not use JavaScript to handle the layout. Bootstrap is not involved either. The dimensions are set with CSS and CSS media queries breakpoints.

The height of the parent container for AJAX-ZOOM uses CSS calc() function with vh and px units. In this example (see source code), we have set the CSS height of one of the nested parent containers to calc(100vh - 110px - 58px - 10px). That is 100% body height minus the height of other containers in this layout. In the HTML markup below we simplified by setting the height to a fixed pixel value.

However, even with bootstrap, unless you set the parent containers height, e.g., with embed-responsive and embed-responsive-item CSS classes to define the proportions, it is necessary to make sure that the parent container has a calculated height value. Otherwise, a responsive AJAX-ZOOM viewer implementation is not able to fit into the parent container because it is not able to determine its height. The calculated height would be zero and therefore AJAX-ZOOM not visible, or it would overlap the container and break your design.

Javascript and CSS files in head

							<!--  Include jQuery core into head section if not already present -->
							<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

							<!--  AJAX-ZOOM javascript -->
							<script type="text/javascript" src="../axZm/jquery.axZm.js"></script>
						<link type="text/css" href="../axZm/axZm.css" rel="stylesheet" />

HTML Markup

							<!-- Container where AJAX-ZOOM will be loaded into -->
						<div id="axZmPlayerContainer" style="width: 100%; height: 500px; background-color: #FFF; position: relative;"></div>

Javacript

							// Define some var to hold AJAX-ZOOM related values
							window.ajaxZoom = {};

							// Path to /axZm/ folder, adjust the path in your implementaion
							ajaxZoom.path = "../axZm/";

							// Define the ID of the responsive container
							ajaxZoom.targetID = "axZmPlayerContainer";

							// Images to load
							ajaxZoom.zoomData = [
							"/pic/zoom/boutique/boutique_001.jpg",
							"/pic/zoom/boutique/boutique_002.jpg",
							"/pic/zoom/boutique/boutique_003.jpg",
							"/pic/zoom/boutique/boutique_004.jpg",
							"/pic/zoom/boutique/boutique_005.jpg",
							"/pic/zoom/boutique/boutique_006.jpg",
							"/pic/zoom/boutique/boutique_013.jpg",
							"/pic/zoom/boutique/boutique_014.jpg",
							"/pic/zoom/fashion/fashion_002.jpg"
							];

							// "example" in query string which is passed to AJAX-ZOOM defines an options set
							// which differs from default values. You can find the options set of this example
							// in /axZm/zoomConfigCustom.inc.php after
							// elseif ($_GET['example'] == 23)
							ajaxZoom.queryString = "example=23";

							// Pass images as CSV separated with '|', you could also use zoomDir to load entire directory with images instead of zoomData
							// For more information about parameters which can be passed see example27.php
							ajaxZoom.queryString += "&zoomData="+ajaxZoom.zoomData.join("|");

							// AJAX-ZOOM possible callbacks
							ajaxZoom.ajaxZoomCallbacks = {

							};

							// Enable overlay before AJAX-ZOOM loads
							window.fullScreenStartSplash = {"enable": true, "className": false, "opacity": 0.75};

							// Use jQuery.fn.axZm.openFullScreen() API to trigger AJAX-ZOOM responsive
						jQuery.fn.axZm.openResponsive(ajaxZoom.path, ajaxZoom.queryString, ajaxZoom.ajaxZoomCallbacks, ajaxZoom.targetID, true, false, false);