Viendo el código de dicha librería, pude cambiar el tamaño de la imagen. Hay dos clases que debes modificar ligeramente:
- panorama
- pv-inner
Ejemplo
$(document).on('ready', function () {
$(".panorama").panorama_viewer({
repeat: false,
direction: "horizontal",
animationTime: 700,
easing: "ease-out",
overlay: true
});
});
body {
align-items: center;
display: flex;
height: 100vh;
justify-content: center
}
.panorama {
border-radius: 5px;
height: 80vh;
width: 80%;
}
.panorama >panorama>.pv-inner {
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/peachananr/panorama_viewer/84488596/jquery.panorama_viewer.min.js"></script>
<link href="https://cdn.rawgit.com/peachananr/panorama_viewer/84488596/panorama_viewer.css" rel="stylesheet" />
<div class="panorama">
<img src="http://www.thepetedesign.com/demos/panorama_viewer/demo_photo5.jpg" alt="image">
</div>
Lo único que debes cambiar es height
en ambas clases. Para .panorama
debe ser un alto específico (el que desees) y para .pv-inner
debe ser 100%
.
PD: Ejecuta varias veces el código porque parece que hay problemas con la sincronización.