Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

I need to scale an entire website down to 80%

Tags:

css

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.

like image 338
3x5 Avatar asked Jan 27 '12 16:01

3x5


People also ask

How do you scale an entire website?

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).

How do I scale down CSS?

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.

How do you scale HTML?

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.


1 Answers

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); } 

Update

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.

like image 135
xec Avatar answered Sep 17 '22 16:09

xec