Question

参考详细处理：

Image shifting/jumping after CSS transition effect with scale transform in Firefox

我已经尝试了那里建议的所有内容，但在CSS过渡效果完成后我仍然可以右移中心块。

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

关键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，我尝试用不同的方法得到相同的结果。我觉得使用缩放转换可能不是最好的答案，所以我尝试只使用max-width并删除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可以解决问题，我强烈建议您这样做，因为代码变得更清晰，浏览器会为您计算所有内容，减少错误数量并提高性能。

在所有浏览器中使用缩放变换进行CSS过渡后的中心块移位（我放弃）

1 个答案: