在所有浏览器中使用缩放转换的CSS转换后的居中块移动(我放弃了)

Question

参考的详细处理

Firefox 中缩放转换的CSS转换效果后的图像移动/跳跃

我已经尝试了那里建议的一切，但在CSS转换效果完成后，我仍然可以正确地移动我的中心块。

顺便说一句，我真的需要transform:scale，因为我在调整大小事件代码中调用了它；我没有时间在onresize期间重新绘制Canvas的上下文。

关键CSS:

#container {
    display:   block;
    margin:    0 auto;
    width:     30.00em;
    height:    22.50em;
    border:    0.30em solid #cd853f;
    overflow:  hidden;
}

其他在我的$(window).bind('resize', function() {...}呼叫中，我有：

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

以及其他浏览器的适当前缀。

刚刚添加了我的第一个jsFiddle(http://jsfiddle.net/johnlove/yL2td3r2/(。。。水平缩小窗口大小时，可以正确地看到带边框的图像比例。但随着窗口的进一步缩小，带边框的图像将继续适当缩放，但您也看到带边框的图片向右滑动

编辑：10月1日和10月6日

试图用不同的词将以上内容向右滑动。。。似乎不知何故，窗口的宽度被错误地计算为大于实际宽度。。。带边框的图像缩放正确，但由于窗口宽度不正确(较大(，带边框图像向右滑动或移动，因为DOM的CSS代码将其居中。

不管怎样，这些都是我的印象，FWIW

我已经到了为多个浏览器放弃这一点的地步。我尝试使用transform: translate and scale together，但没有成功

Answer 1

在分析您的JSFiddle时，我试图用不同的方法获得相同的结果。我觉得使用缩放转换可能不是最好的答案，所以我尝试只使用最大宽度并删除javascript。

如果您需要对小屏幕进行特殊处理，您可能需要考虑使用媒体查询

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

新css：

/* #container ul li img */
 #container {
    margin: 0 auto;
    width: 30.00em;
    max-width: 90%;
    border: 0.30em solid #cd853f;
    overflow: hidden;
}
#container > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#container img {
    /* match specs to #container */
    width: 100%;
    vertical-align: middle;
}

JSFiddle：http://jsfiddle.net/cv42bk0q/1/

我希望它能有所帮助。

Ps.：如果只使用CSS就可以解决问题，我强烈建议您这样做，因为代码会变得更干净，浏览器会为您计算所有内容，从而减少错误数量并提高性能。