sets width at 100%. calculates height according to ratio

asset/js/height_calculator.js

@@ -0,0 +1,6 @@
+function get_height(container, ratio) {
+  //console.log($(container).width(), ratio)
+  var height = $(container).width() / ratio
+  //console.log(height)
+  return height
+}

src/Form/PanoramaViewerBlockForm.php

@@ -20,16 +20,19 @@ class PanoramaViewerBlockForm extends Form
       ],
 		]);
 
+		/*
 		$this->add([
 			'name' => 'o:block[__blockIndex__][o:data][width]',
 			'type' => Element\Number::class,
       'options' => [
-				'label' => 'Width in pixels',
+				'label' => 'Width in percentage',
 			],
 			'attributes' => [
-				'min' => '100',
+				'min' => '50',
+				'max' => '100',
 			],
 		]);
+		*/
 		
 		$this->add([
 			'name' => 'o:block[__blockIndex__][o:data][ratio]',

src/Site/BlockLayout/PanoramaViewer.php

@@ -95,14 +95,10 @@ class PanoramaViewer extends AbstractBlockLayout
 		}
     $item_id = $attachments[0]->item()->url();
     //$title = $attachments[0]->item()->title();
-    $title = $block->dataValue('title');
-    $width = $block->dataValue('width');
-    $height = $width / $block->dataValue('ratio');
 		return $view->partial('common/block-layout/panorama-viewer', [
 			'panorama_type' => $panorama_type,
-			'title' => $title,
+			'title' => $block->dataValue('title'),
-			'width' => $width,
+			'ratio' => $block->dataValue('ratio'),
-			'height' => $height,
       'autoLoad' => $block->dataValue('autoLoad'),
       'renderSourceLink' => $block->dataValue('renderSourceLink'),
 			'urls' => $urls,

view/common/block-layout/panorama-viewer.phtml

@@ -3,6 +3,8 @@
 																											'PanoramaViewer'));
 	$this->headScript()->appendFile($this->assetUrl('vendor/pannellum/pannellum.js',
 																									'PanoramaViewer'));
+	$this->headScript()->appendFile($this->assetUrl('js/height_calculator.js',
+																									'PanoramaViewer'));
 
 	if ($panorama_type == "video") {
 		$this->headLink()->appendStylesheet($this->assetUrl('vendor/video.js/video-js.css',
@@ -20,9 +22,8 @@
 ?>
 
 <style>
-	#<?= $id ?> {
+	.pannemmul-wrap {
-		height: <?= $height ?>px;
+		width: 100%;
-		width: <?= $width ?>px;
 	}
 </style>
 
@@ -95,4 +96,6 @@
 			 }
 		});
 	<?php	} ?>
+	var height = get_height('#<?= $id ?>', <?= $ratio ?>)
+	$('#<?= $id ?>').css('height', height)
 </script>