Html 两边溢出

我想在悬停状态下缩放图片。
因此，到目前为止，它仍然有效，但最终结果并不是我想要的。
当图片缩放时，它停止在包含

div

的窗口的左侧，并放大到右侧

我已经找到了

direction

属性，但使用该属性，我只能切换侧面行为。类似于

direction:all

的东西可能会起作用，但它并不存在

我的期望：

我得到的：

见

---

我推荐不使用任何JavaScript和jQuery代码的纯CSS。

这里有一种方法：

#container {
    margin: 0 auto;
    width: 800px;
    height: 400px;
    /*overflow: hidden;*/
    position: relative;
    border: 1px solid red;
}
#container img {
    position: absolute;
    margin: auto;
    top: 0px;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    /*transition: all 0.5s ease;*/
}
#container img:hover {
    left: -5%;
    width: 110%;
    height: 110%;
}

将

左侧：-5%

添加到

img:hover

的CSS规则中

---

请参见演示：

如果您不关心IE 6、7、8，那么为什么不改用translate。得出了相同的结论+1（简单而有效）