css - 为什么 transform : scale(xx. y) 从 Browser 变为 Browser

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

标记没有改变，只是“外观”改变了，即它“看起来”按比例缩小了。

以上都是准确的吗？

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

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

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

但是，在你看这个 jsFiddle 之前，让我先口头解释一下我想做什么。

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

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

我记得在一部非常非常非常老的电影中有一句台词， Actor 脱口而出“我正在褪色，我正在褪色”。 梦想之地。在这个时刻，这句话听起来对我来说非常合适。

Answer 1

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

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