为什么 transform: scale(xx.y) 从浏览器变为浏览器

Question

[已解决 - 解决方案如下所述]

#mycontainer {
   margin: 0 auto;
   width: 30em;
}

此加价居中。

所以，以后，

$('#mycontainer').css("-webkit-transform", "scale(0.8)");
$('#mycontainer').css("-moz-transform", "scale(0.8)");
$('#mycontainer').css("-ms-transform", "scale(0.8)");
$('#mycontainer').css("-o-transform", "scale(0.8)");
$('#mycontainer').css("transform", "scale(0.8)");

标记不变，只是 "appearance"，即 "appears" 缩小了。

以上都准确吗？

而且，如果是这样，我如何便携地将对象居中并停在那里？

根据我的测试，Safari 使用上面的代码做了我想要的，而其他浏览器也将缩小的对象向右移动，这不是我想要的。

为了直接回应您的有效评论，这里有一个 jsFiddle 可以更完整地说明我的观点：http://jsfiddle.net/johnlove/yL2td3r2/

但是，在您查看这个 jsFiddle 之前，让我先口头解释一下我正在尝试做什么。

我从标准 css 开始，用于将一个部门居中。然后，我将调整大小方法挂接到 window 的 onresize 事件中。在那个事件中，我想保持分区居中并缩小变换中心在其默认中心 (50,50)；例如，缩放到 0.8，这意味着左边缘 10% 和右边缘 10% 保持中心相同 (50,50)。

听起来很简单......但是，整个分区都发生了移动......并且只有当封闭的window变得超薄时才会移动......分区被缩小并保持居中直到window 变得非常非常瘦。

我记得在一部非常非常非常老的电影中，演员脱口而出的台词 "I'm fading, I'm fading"。 梦想之地。在这个关头，这对我来说听起来像是一个非常合适的台词。

Answer 1

这似乎...有点荒谬的解决方案。您想要一个以流为中心的图像，尽可能大，但绝不能大于 window 大小？只需使用

.container { 
    width: 100%; 
    margin: 0px auto; 
    max-width: 30em; 
}

在不使用 JS 的情况下获得预期效果。

您看到这个的原因是因为您使用的是一组 width - 这意味着您的容器总是 30em 宽，并且它的 transform-origin 默认为 50% 50%。

因此您的容器的中心点始终保持在 15em，并且它正在缩放 到那个点 ，这似乎更靠近屏幕的右侧，因为您屏幕尺寸减小。这就是为什么它看起来向左移动的原因 - 你的 em 总是 30em 宽，所以原点总是 15em 向左。诀窍是将 transform-origin 设置为 0 0 - 尽管上述技术更好更简单。

让我们在这里稍微修改一下您的代码（我还删除了对 jQuery 的任何依赖，因为这在 vanilla JS 中确实不难，并且删除了 ul - 这是 只是为了简单起见 因为在这种情况下它对最终结果没有影响):

window.addEventListener('resize', function(){ var theScale = 0.7 * window.innerWidth / (480 + 9.6); theScale = theScale > 1 ? 1 : theScale; var theContainer = document.getElementById('container'); theContainer.style.msTransform = "scale(" + theScale + ")"; theContainer.style.mozTransform = "scale(" + theScale + ")"; theContainer.style.webkitTransform = "scale(" + theScale + ")"; theContainer.style.oTransform = "scale(" + theScale + ")"; theContainer.style.transform = "scale(" + theScale + ")"; }, false);

body { margin: 0; padding: 0; } #container { margin: 0 auto; width: 30.00em; height: 22.50em; border: 0.30em solid #cd853f; overflow: hidden; -webkit-transform-origin: 0 0 ; -moz-transform-origin: 0 0 ; -ms-transform-origin: 0 0 ; transform-origin: 0 0 ; } #container img { /* match specs to #container */ width: 100%; vertical-align: middle; }

<section id="container"> <img src="http://lovesongforever.com/My_Love_Song_Forever_Folder/50_images/Nancy_and_John.jpg" alt="At Entrance of CP" /> </section>

但是，这是我的简单解决方案：

body { margin: 0; padding: 0; } #container { margin: 0 auto; width: 100%; max-width: 30.00em; height: 22.50em; border: 0.30em solid #cd853f; overflow: hidden; } #container img { width: 100%; vertical-align: middle; }

<section id="container"> <img src="http://lovesongforever.com/My_Love_Song_Forever_Folder/50_images/Nancy_and_John.jpg" alt="At Entrance of CP" /> </section>

Answer 2

10 月 22 日星期四

这是我承诺的解决方案 ...

1) 每个人，绝对是上面发帖的每个人都做出了贡献……每个人。

2) 但是，特别感谢 "Abhitalks" 和 "somethinghere"。

(a)"Abhitalks" 表示

"This seems to be an XY problem".

来自 Abhitalks 的 "biggee" 打开了第一个灯泡，因为当 window 变得非常小时，#container 才跳到右边。很明显我想要一个填充 left/right = 15%。所以......我把那个填充规范放在 <body>.

(b) "somethinghere" 在他说

时打开了第二个灯泡

"So the center point of your container firmly remained at 15em, and it was scaling to that point, which seemed to be more to the right hand side of your screen as your screen size decreased. The trick is to set the transform-origin to 0 0"

所以...

body {
    padding: 0em 15%;
}

并连接到我的调整大小例程中：

var theScale = 0.7*windowWidth/489.6;

if (theScale > 1.0)
{
    theScale = 1.0;
}

/*
    For the sake of speed all transform-origin
    specs are actually in #container's css.
    See the redone jsFiddle below.
*/

theContainer.css("transform-origin", "0 0");
theContainer.css("transform",
                 "scale(" + theScale + ")");

在 http://jsfiddle.net/johnlove/yL2td3r2/

查看我更新的 jsFiddle

一种欣快感已经爆发......连同"Oh my ... what am I going to do now?"

为什么 transform: scale(xx.y) 从浏览器变为浏览器

Why does transform: scale(xx.y) change from Browser to Browser

css

css-transforms