Basically the module takes a screenshot of the body tag's content. So you need to fix the size of you image on this tag using CSS then you can use percent on body's children.
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:1px3px15pxlightgray;height:250px;}</style></head><body><divclass="card">
[ ... ] (lots of subdivs)
</div></body></html>
¡Amazing!
Just tried it out, loving it! Just one question. If I use px to set the width of my elements, the image looks good:
But if I use % to set the width, then:
Why could this happen?
However, amazing project, thank you!
Thank you Desiré!
Basically the module takes a screenshot of the body tag's content. So you need to fix the size of you image on this tag using CSS then you can use percent on body's children.
Maybe I should add this in the documentation?
Not sure, my code is as follows:
and my css:
I guess if it's a % then it won't work properly and you must set a fixed width for your elements before taking the screenshot!
I think it would be useful to add this as a sidenote, in case someone is setting all the components with %!
Also, it works perfectly fine with rem and em too.
EDIT: I'm using the CLI version just in case that matters!
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?
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!
Désiré I added a section about this in the documentation. What do you think of it?
Clear as a sunny day, I think there can't be any risk now! Thank you!