DEV Community

Discussion on: Generate images from HTML in Node.js

 
yvonnickfrin profile image
🦁 Yvonnick FRIN • Edited

Percentage are relative to your parent dimensions So it will be 20 percent of body. If you don't fix body size it will be relative to the browser's viewport I guess. I don't set any viewport. So I recommend fixing body size to the resolution you want for the output file.

In the example below I fix the size to A4 format in high resolution. The output file resolution will be 2480x3508. So the card size will be 20% of 2480px. You see what I mean?

<html>
  <head>
    <style>
       body {
         width: 2480px;
         height: 3508px;
       }
       .card{
         width: 20%; /** if it's % then the image's width doesn't display properly **/
         box-shadow: 1px 3px 15px lightgray;
         height: 250px;
        }
    </style>
  </head>
  <body>
    <div class="card">
       [ ... ] (lots of subdivs)
    </div>
  </body>
</html>
Thread Thread
 
helleworld_ profile image
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

Sure! I usually never set any size for the body, it should be nice to have it in mind so the image looks good, thank you!

Thread Thread
 
yvonnickfrin profile image
🦁 Yvonnick FRIN

DΓ©sirΓ© I added a section about this in the documentation. What do you think of it?

Thread Thread
 
helleworld_ profile image
DesirΓ© πŸ‘©β€πŸŽ“πŸ‘©β€πŸ«

Clear as a sunny day, I think there can't be any risk now! Thank you!