CSS缩放具有100％宽度的元素 [英] CSS Scale an element with 100% width

问题描述

我有兴趣缩小100％宽度的div。我遇到的问题是，当我缩放元素它获得一个固定的宽度，不再延伸100％的宽度。

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.

示例 - http://jsfiddle.net/Fz7qh/2/

当我使用CSS缩放属性（相对于transform：scale）它按预期工作，但我听说zoom属性不是很好支持。我的问题是这可以实现与CSS变换规模吗？

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?

推荐答案

为了模拟 zoom 属性在这种情况下，可以添加 -transform-origin：0 0; 并将 width 设置为 oldWidth / newScale （ 100 / 0.7〜= 142.857143 ）：

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%;
}​

这篇关于CSS缩放具有100％宽度的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！