为什么 transform: scale(xx.y) 从 Browser 变成 Browser答案

【问题标题】：Why does transform: scale(xx.y) change from Browser to Browser为什么 transform: scale(xx.y) 从 Browser 变成 Browser
【发布时间】：2023-03-09 18:07:01
【问题描述】：

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

#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 使用上面的代码完成了我想要的操作，而其他浏览器也将按比例缩小的对象向右移动，这不是我想要的。

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

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

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

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

我记得一部非常、非常、非常古老的电影中的一句台词，其中演员脱口而出“我正在衰落，我正在衰落”。 梦想之地。在这个时刻，这对我来说听起来很合适。

【问题讨论】：

#mycontainer是什么元素？我的 FF、Chrome、Safari 没有观察到变化。我尝试div#mycontainer 获得了很好的居中结果。
请用一个完整的例子在问题中重新创建这个问题，包括 HTML。另外，you can safely leave out most of those prefixes，并且不带前缀的属性应该在底部，以便获得优先权。
(1) jQuery 为您的 CSS 属性添加前缀，并且 (2) 不要落入供应商前缀陷阱。 没有-o-transform 和-ms-transform 这样的东西：Opera 和 IE 都支持 transform 属性，没有供应商前缀。
特里...我完全被您的“没有这样的事情”评论弄糊涂了...参考：stackoverflow.com/questions/14329084/…。另一个摆脱位...“jQuery 为您的 CSS 属性添加前缀”。请引用您的来源，因为我很高兴能做到这一点，而无需添加更多库，例如 prefixFree。
这似乎是一个 XY 问题。您应该使用 CSS 来获取响应式图像。无论如何，您的代码的问题是您正在尝试缩放容器div，它会在某个时候变得小于您的图像并导致负边距。你应该做的是缩放图像。见这里 - jsfiddle.net/abhitalks/yL2td3r2/68

标签： css css-transforms

【解决方案1】：

10 月 22 日，星期四

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

1) 所有人，绝对是上面发帖的所有人……所有人。

2) 然而，特别感谢“Abhitalks”和“somethinghere”。

(a)“Abhitalks”说

“这似乎是一个 XY 问题”。

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

(b) “somethinghere”在他说的时候打开了第二个灯泡

“所以你的容器的中心点牢牢地保持在 15em，它正在缩放到那个点，这似乎更偏向右手随着屏幕尺寸的减小，屏幕的一侧。诀窍是将变换原点设置为 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 + ")");

看看我更新的 jsFiddle http://jsfiddle.net/johnlove/yL2td3r2/

一种欣快感已经爆发了......伴随着“哦，我的......我现在要做什么？”

【讨论】：

【解决方案2】：

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

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

【讨论】：