kozakdenys / qr-code-styling

Automaticly generate your styled QR code in your web app.

Home Page:https://qr-code-styling.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Is it possible to extent the qr code to fill the canvas

technetium opened this issue · comments

I have a responsive design, the size of the canvas where I want to show the QR code can vary. How to I make the QR code the same size as the canvas.

I've tried setting the width and height to:

  • auto: Error: The provided double value is non-finite.
  • 0: Error: The canvas is too small
  • 10000: QR code is now to big for the canvas
  • Not at all: Generates at default size

Has anybody another suggestion?

A solution that worked for me was generating a fixed size canvas, i.e. 300x300, and applying CSS scaling to it, which dynamically updates to fill it in w/ the parent node.

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

A solution that worked for me was generating a fixed size canvas, i.e. 300x300, and applying CSS scaling to it, which dynamically updates to fill it in w/ the parent node.

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

Hey @jzombie do you have a codesandbox for the solution you mentioned? I couldn't make it work