use vw instead of px

Author: nadar

src/BreakpointType.php

@@ -13,10 +13,10 @@ public function srcset(int $screenSize, string $src): string
         return "{$src} {$screenSize}w";
     }
 
-    public function size(int $screenSize): string
+    public function size(int $screenSize, int $maxWidth): string
     {
-        $width = $this->width();
-        return "($width: {$screenSize}px) {$screenSize}px";
+        $vw = floor(($screenSize / $maxWidth) * 100);
+        return "({$this->width()}: {$screenSize}px) {$vw}vw";
     }
 
     public function width(): string

src/Image.php

@@ -64,7 +64,7 @@ public static function attributes(string|Responsive $src, $alt, $width = null, $
 
         if ($src instanceof Responsive) {
             $attributes[] = sprintf('srcset="%s"', $src->getSrcset($image));
-            $attributes[] = sprintf('sizes="%s"', $src->getSizes());
+            $attributes[] = sprintf('sizes="%s"', $src->getSizes($image));
         }
 
         return implode(" ", $attributes);

src/Responsive.php

@@ -31,14 +31,15 @@ public function add(string $screenSize, BreakpointType $type, ?int $width = null
 
     public function getSrcset(Image $image): string
     {
-        $originalWidth = $image->getWidth();
+        $img = clone $image;
+        $originalWidth = $img->getWidth();
         $hasLargeImage = false;
-        $fallback = $image->getSrc() . ' ' . $originalWidth . 'w';
+        $fallback = $img->getSrc() . ' ' . $originalWidth . 'w';
         $srcset = [];
         foreach ($this->_srcset as $src) {
             /** @var BreakpointType $type */
             $type = $src[1];
-            $srcset[] = $type->srcset($src[0], $image->setWidth($src[2])->setHeight($src[3])->getSrc());
+            $srcset[] = $type->srcset($src[0], $img->setWidth($src[2])->setHeight($src[3])->getSrc());
 
             if ($src[2] > $originalWidth) {
                 $hasLargeImage = true;
@@ -50,13 +51,20 @@ public function getSrcset(Image $image): string
         return implode(", ", $srcset);
     }
 
-    public function getSizes(): string
+    public function getSizes(Image $image): string
     {
+        $maxSize = $image->getWidth();
+        foreach ($this->_srcset as $src) {
+            if ($src[2] > $maxSize) {
+                $maxSize = $src[2];
+            }
+        }
+
         $sizes = [];
         foreach ($this->_srcset as $src) {
             /** @var BreakpointType $type */
             $type = $src[1];
-            $sizes[] = $type->size($src[0]);
+            $sizes[] = $type->size($src[0], $maxSize);
         }
         $sizes[] = '100vw';
         return implode(", ", $sizes);

tests/ResponsiveImageTest.php

@@ -15,7 +15,7 @@ public function testImageConstructor()
 
         $image = Image::attributes($responsive, 'Test Image', 100, 200, 'png', 'auto', 'sync');
 
-        $this->assertEquals('src="https://storage.flyo.cloud/test.jpg/thumb/100x200?format=png" alt="Test Image" loading="eager" decoding="sync" width="100" height="200" srcset="https://storage.flyo.cloud/test.jpg/thumb/400x400?format=png 400w, https://storage.flyo.cloud/test.jpg/thumb/1200xnull?format=png 1000w" sizes="(max-width: 400px) 400px, (min-width: 1000px) 1000px, 100vw"', $image);
+        $this->assertEquals('src="https://storage.flyo.cloud/test.jpg/thumb/100x200?format=png" alt="Test Image" loading="eager" decoding="sync" width="100" height="200" srcset="https://storage.flyo.cloud/test.jpg/thumb/400x400?format=png 400w, https://storage.flyo.cloud/test.jpg/thumb/1200xnull?format=png 1000w" sizes="(max-width: 400px) 33vw, (min-width: 1000px) 83vw, 100vw"', $image);
     }
 
     public function testSingleResponsiveImageWithRawOriginalSizeFallback()
@@ -25,6 +25,6 @@ public function testSingleResponsiveImageWithRawOriginalSizeFallback()
 
         $image = Image::attributes($responsive, 'Test Image', 1000, 800, 'png', 'auto', 'sync');
 
-        $this->assertEquals('src="https://storage.flyo.cloud/test.jpg/thumb/1000x800?format=png" alt="Test Image" loading="eager" decoding="sync" width="1000" height="800" srcset="https://storage.flyo.cloud/test.jpg/thumb/400x400?format=png 400w, https://storage.flyo.cloud/test.jpg/thumb/1000x800?format=png 1000w" sizes="(max-width: 400px) 400px, 100vw"', $image);
+        $this->assertEquals('src="https://storage.flyo.cloud/test.jpg/thumb/1000x800?format=png" alt="Test Image" loading="eager" decoding="sync" width="1000" height="800" srcset="https://storage.flyo.cloud/test.jpg/thumb/400x400?format=png 400w, https://storage.flyo.cloud/test.jpg/thumb/1000x800?format=png 1000w" sizes="(max-width: 400px) 40vw, 100vw"', $image);
     }
 }