defines image width with percentages

Module.php

@@ -9,6 +9,13 @@ class Module extends AbstractModule
 {
 	const NAMESPACE = __NAMESPACE__;
 
+	const IMAGE_WIDTH = [
+			'25' => '25 %',
+			'50' => '50 %',
+			'75' => '75 %',
+			'100' => '100 %',
+	];
+
 	public function getConfig()
 	{
 		return include __DIR__ . '/config/module.config.php';

src/Form/ImageViewerBlockForm.php

@@ -21,13 +21,11 @@ class ImageViewerBlockForm extends Form
 
 		$this->add([
 			'name' => 'o:block[__blockIndex__][o:data][width]',
-			'type' => Element\Number::class,
+      'type' => Element\Select::class,
       'options' => [
-				'label' => 'Width in pixels',
+          'label' => 'Width',
-			],
+					'value_options' => Module::IMAGE_WIDTH,
-			'attributes' => [
+      ],
-				'min' => '100',
-			],
 		]);
 
 		$this->add([

src/Site/BlockLayout/ImageViewer.php

@@ -74,11 +74,10 @@ class ImageViewer extends AbstractBlockLayout
 		static $id = 0;
 
     $media = $attachments[0]->item()->media()[0];
-    $width = $block->dataValue('width');
 		return $view->partial('common/block-layout/imageViewer', [
 			'zoom' => $block->dataValue('zoom'),
 			'title' => $block->dataValue('title'),
-			'width' => $width,
+			'width' => $block->dataValue('width'),
 			'image' => $media->primaryMedia()->thumbnailUrl('large'),
       'id' => 'iv-' . ++$id,
 		]);

view/common/block-layout/imageViewer.phtml

@@ -20,9 +20,8 @@
 	?>
 
 	<style>
-		.archive-img {
+		#<?= $id ?> {
-			width: <?= $width ?>px;
+			width: <?= $width ?>%;
-			<!-- width: 50%; -->
 		}
 		<?php if ($zoom == true) { ?>
 		#<?= $id ?> {
@@ -51,13 +50,12 @@
 
 	<?php if ($zoom == true) { ?>
 		<script>
-		/*
+			/*
-		$(document).ready(function(){
+			$(document).ready(function(){
-			wheelzoom(document.querySelector('#<?= $id ?>'));
+				wheelzoom(document.querySelector('#<?= $id ?>'));
-		});
+			});
-				*/
+			*/
 		</script>
-
 	<?php } ?>
 
 </div>