CSS Scale an element with 100% width

Question

I am interested in zooming out a div with 100% width. The problem I am having, is when I scale the element out it gets a fixed width and no longer extends 100% of the width.

Example - http://jsfiddle.net/Fz7qh/2/

When I use the CSS zoom property (as opposed to transform: scale) it works as expected, but I hear the zoom property is not well supported. My question is can this be achieved with CSS transform scale?

The CSS `zoom` property is indeed poorly supported. Neither Firefox nor Opera support it. — thirtydot, Jun 07 '12 at 18:00
Is this what you're after? http://jsfiddle.net/thirtydot/Fz7qh/5/ — thirtydot, Jun 07 '12 at 18:06
@thirtydot interesting idea. Seems to work. Post it as an answer so I can accept it — levi, Jun 07 '12 at 18:11

score 57 · Accepted Answer · answered Jun 07 '12 at 18:17

57

To emulate what the zoom property does in this case, you can add -transform-origin: 0 0; and set the width to oldWidth / newScale (100 / 0.7 ~= 142.857143):

http://jsfiddle.net/thirtydot/Fz7qh/5/

div.zoomed {
    -webkit-transform: scale(.7);
    -webkit-transform-origin: 0 0;
    width: 142.857143%;
}

answered Jun 07 '12 at 18:17

thirtydot

224,678
48
389
349

I just added `box-sizing: border-box;` also just to make sure the `padding` is also included in `width` – M. Ahmad Zafar Jun 28 '15 at 04:08
In IE11 I get scrollbar after clicking on the image. Any ideas why? – mrówa Mar 29 '16 at 16:49
1

Ok, I've found out: you need to add outer element and scale it depending on the zoom like here http://jsfiddle.net/v2fukeq5/11/ (+ overflows for non-const height). – mrówa Mar 29 '16 at 17:44

CSS Scale an element with 100% width

1 Answers1

Linked