I just built out a website for a client, based on the Photoshop files they sent me, and they came back and told me that somehow the PSDs were 125% the size they were supposed to be, and that they need be to shrink everything to 80% of what it is now.
I figure I'm going to need to re-cut all the images, but I would rather not rewrite the CSS so I'm exploring alternatives.
Currently, all values are in pixels. I'm wondering if I should try to find a script that would take all the pixel values and multiply by .8, or if I should use a px to em converter and then set the base size in the html tag to 80%, or if there is better way to fix this problem.
Using Firefox, you can enlarge an entire web page by simply pressing CTRL + . What this does is proportionally enlarge the entire web page (fonts, images, etc).
scale() The scale() CSS function defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is defined by a vector, it can resize the horizontal and vertical dimensions at different scales. Its result is a <transform-function> data type.
If your image doesn't fit the layout, you can resize it in the HTML. One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels.
Ugly css hack alert! :D
html { zoom: 0.8; /* Old IE only */ -moz-transform: scale(0.8); -webkit-transform: scale(0.8); transform: scale(0.8); }
It appears latest Chrome and IE10 supports (and applies) both zoom
and transform
at the same time, scaling it twice, so I recommend only using zoom
when testing old IE browsers.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With