29

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.

3x5
  • 449
  • 1
  • 4
  • 10
  • 7
    Whatever you do... id make sure you charge them double whatever you estimated for slicing and layout. – prodigitalson Jan 27 '12 at 16:59
  • 2
    you definitely don't need to re-cut all images. When you open the image in photoshop, go to File -> Save for Web & Devices. In the opening screen you can set the image size to 80%. Save it, image resized. – Sven Bieder Jan 27 '12 at 17:01
  • 30
    Tell them to stand farther away from their monitors. – j08691 Jan 27 '12 at 17:09
  • This could help - http://stackoverflow.com/questions/1156278/how-can-i-scale-an-entire-web-page-with-css – SpaceBeers Jan 27 '12 at 17:17
  • lol @ j08691. SpaceBeers, I saw that but it didn't answer the question, really, except to say that Jon Tan did it, but it doesn't totally explain how. I will view the source on his site and see what I can learn from that. – 3x5 Jan 27 '12 at 17:32
  • How big is this CSS, really? Seems like a few choice Find/Replace commands in a good text editor would solve the problem. Can you post the CSS? – Robert Harvey Jan 27 '12 at 18:14
  • The stylesheet is almost 1000 lines of code. Should I put it in pastebin? – 3x5 Jan 27 '12 at 19:48

2 Answers2

42

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.

xec
  • 17,349
  • 3
  • 46
  • 54
  • 2
    +1 for quick n dirty fix that will work, sometimes that's really needed. The downside is that often, these quick fixes once applied tend to stay there "as long as it works", so "charge them double" suggestion seems best to me. But this is cool:) – CodeVirtuoso Jan 27 '12 at 22:23
  • Yeah, I agree. This wasn't really meant as a serious answer - but I do use this as a nice method to see how a site will look and/or work at another size :) – xec Jan 27 '12 at 22:27
  • 1
    Beware, using scale transforms can cause problems with js based/pixelbased interaction types such as draggable and order. I'm working on a similar issue and have thusfar noticed some of those still work just fine when using em units, but not with scale transforms. – Koert van Kleef Apr 20 '16 at 10:32
1

You can re-size the page inside of an iframe that is at 80% width. You would need to remove the borders and turn scrolling of but it should work.

Tutorial here How can I scale the content of an iframe?

I haven't tried it but it seems like it could possibly be sketchy as far a browser compatibility and bugs if you ask me. just thought i would pass it along

Community
  • 1
  • 1
Zach
  • 1,964
  • 2
  • 17
  • 28