examples/resizeFit.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="../css/smartphoto.min.css">
    <link rel="stylesheet" href="./assets/style.css">
	<title>SmartPhoto.js</title>
</head>
<body>
	<div class="wrapper">
		<h1 class="title">SmartPhoto.js</h1>
		<div class="masonry">
			<div class="brick">
				<a href="./assets/large-lion.jpg" class="js-img-viewer" data-caption="Lion" data-id="lion">
					<img src="./assets/lion.jpg" width="360" alt=""/>
				</a>
			</div>
			<div class="brick">
				<a href="./assets/large-camel.jpg" class="js-img-viewer" data-caption="Camel" data-id="camel">
					<img src="./assets/camel.jpg" width="360" alt=""/>
				</a>
			</div>
			<div class="brick">
				<a href="./assets/large-hippo.jpg" class="js-img-viewer" data-caption="Hippo" data-id="hippo">
					<img src="./assets/hippo.jpg" width="360" alt="" />
				</a>
			</div>
			<div class="brick">
				<a href="./assets/large-koala.jpg" class="js-img-viewer" data-caption="Koala" data-id="koala">
					<img src="./assets/koala.jpg" width="360" alt="" />
				</a>
			</div>
			<div class="brick">
				<a href="./assets/large-bear.jpg" class="js-img-viewer" data-caption="Bear" data-id="bear">
					<img src="./assets/bear.jpg" width="360" alt=""/>
				</a>
			</div>
			<div class="brick">
				<a href="./assets/large-rhino.jpg" class="js-img-viewer" data-caption="Rhino" data-id="rhino">
					<img src="./assets/rhino.jpg" width="360" alt=""/>
				</a>
			</div>
		</div>
	</div>
	<script src="../js/smartphoto.js?v=1"></script>
	<script>
	document.addEventListener('DOMContentLoaded',function(){
		new SmartPhoto(".js-img-viewer",{
            resizeStyle:'fit'
        });
	});
	</script>
</body>
</html>