I am looking to replicate the puppeteer fullPage
feature. This shrinks an element into the page viewport before taking a screenshot. This is what I want: My element to be forced to fit into the viewport. I looked at the fullPage
source code but couldn't tell what it was doing exactly. Maybe it's using JS and not CSS? I don't expect anyone will know this.
I tried applying every variation of height restrictions to body and then adding max-height
,height
or min-height
to the div, but it doesn't obey height with any of these. I've tried adding height restrictions to all the children but even then nothing happens.
Here is what happpens with puppeteer when I set the viewport to 600x600. It returns an element (screenshot to be exact) which is 300x536. Before taking the shot, the whole card is compressed down and is viewable. This what I want in the browser in html:
[![ente