title: How to resize Cypress screenshot using environment variables
body: <p>In my Cypress test, I am trying to take a screenshot of the UI, &amp; then re-size the screenshot.</p>
  <p>My end goal is to be able to pass <em>height</em> &amp; <em>width</em> values as environment variables when running the tests.</p>
  <p>Below is my latest code, the code is based on this link <a href="https://docs.cypress.io/api/commands/screenshot#Filename" rel="nofollow noreferrer">https://docs.cypress.io/api/commands/screenshot#Filename</a>:</p>
  <p>Spec file:</p>
  <pre><code>it('displays two todo items by default', () =&gt; {
      cy.screenshot({ x: 20, y: 20, width: 400, height: 300 })
  })
  </code></pre>
  <p>And here is my <code>Index.js</code>:</p>
  <pre><code>module.exports = (on, config) =&gt; {
    on('after:screenshot', details =&gt; {
      console.log('--- Details ---')
      console.log(details);
    });
  }
  </code></pre>
  <p>The above code does take a screenshot, but the image isn't being resized.</p>
  <p>The image stays at the default dimensions <em>(1000 * 660)</em>.</p>
  <p>Here are the deatils logged in <code>after:screenshot</code>:</p>
  <pre><code>--- Details ---
  {
    testAttemptIndex: 0,
    size: 45768,
    takenAt: '2021-07-24T10:30:35.926Z',
    dimensions: { width: 1000, height: 660 },
    multipart: true,
    pixelRatio: 1,
    name: null,
    specName: '1-getting-started/todo.spec.js',
    path: 'C:\\Cypress\\cypress\\screenshots\\1-getting-started\\todo.spec.js\\example to-do app -- displays two todo items by default.png',
    scaled: false,
    blackout: [],
    duration: 861
  }
  </code></pre>
  <p>Can someone please tell me how I can change the dimensions of the screenshot, &amp; why this code isn't doing it?</p>