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

标记不会改变，只是＆＃34;外观＆＃34;，即它＆＃34;出现＆＃34;按比例缩小。

以上都是准确的吗？

如果是这样，我如何将对象移植到中心并停在那里？

从我的测试中，Safari使用上面的代码执行我想要的操作，而其他浏览器也将缩小的对象向右移动，这不是我想要的。

直接回复您的有效评论，这里有一个jsFiddle来更全面地说明我的观点：http://jsfiddle.net/johnlove/yL2td3r2/

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

我从标准css开始，用于集中一个部门。然后，我将一个resize方法挂钩到窗口的onresize事件中。在那个事件中，我希望将分区保持在中心位置，并将变换中心缩小到其默认中心（50,50）;例如，对于缩放到0.8，这意味着引入左边缘10％，右边缘10％保持中心相同（50,50）。

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

我记得在一部非常非常非常古老的电影中的一条线，其中演员脱口而出＃34;我褪色，我褪色＆＃34;。 梦想领域。在这个时刻，这听起来对我来说非常合适。

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>

Answer 2

10月22日星期四

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

1）每个人，绝对是上面发布的每个人都贡献了......每个人。

然而，特别感谢“Abhitalks”和“somehere”。

（a）“Abhitalks”说

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

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

（b）当他说

时，第二个灯泡打开了“某处”

“所以你的容器的中心点坚定地保持在15em，并且它正在缩小到这一点，这似乎更多的是右手随着屏幕尺寸的减小，屏幕的一侧。诀窍是将transform-origin设置为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

一种兴奋感已经爆发......再加上“哦，我......我现在要做什么？”

为什么transform：scale（xx.y）从浏览器更改为浏览器

2 个答案: