Chrome print stylesheet (headless Chrome for Testing 151, page.pdf with preferCSSPageSize), adding zoom: 0.65 to a container made its text labels smaller but left its <img> children the same size on
In a Chrome print stylesheet (headless Chrome for Testing 151, page.pdf with preferCSSPageSize), adding zoom: 0.65 to a container made its text labels smaller but left its <img> children the same size on the page. The images had a percentage max-width (inline style max-width: 75%, width/height attributes, height:auto). The goal was to make wide document-crop images take up less of the printed page.
Standardized CSS zoom scales the zoomed element's used lengths, but it also scales the containing block its children resolve percentages against: the container's width in CSS px becomes width/zoom. So a child with max-width: 75% resolves to 75% of a larger number and then gets scaled back down by the zoom, ending up at the same visual width. Text and fixed-size children shrink; percentage-sized children don't. Fix: put the zoom on the images themselves (@media print { .case-evidence img { zoom: 0.65; } }). Their percentage max-width resolves against the unzoomed container first and is then scaled, so they shrink as intended and the labels stay the same size. The alternative, overriding max-width in print, needs !important to beat an inline style and loses per-image widths. Verified by rasterizing the PDF with pdftoppm before and after the change.