html - CSS从不同方向更改元素宽度

我有一个div，其中包含一个图像元素，其设置如下：

<div id="container">
  <img src="cat.jpg"/>
</div>

和CSS：

#container {
  width: 150px;
  height: 200px;
}

#container img {
  width: 200px;
  height: 200px;
  overflow: none;
}

目前容器宽度小于img宽度，这意味着我想要的图像的右侧部分被裁剪掉了。但是，我希望将图像的左侧部分切掉。

我已经尝试过尝试背景定位，但是还没有得到我想要的东西。有人知道实现此目标的正确方法吗？

为了澄清，我想实现下面蓝色框中所表示的效果（淡出的部分实际上实际上是不可见的）：

最佳答案

这应该工作：

#container {
  width: 150px;
  height: 200px;
  overflow: hidden;
}

#container img {
  width: 200px;
  height: 200px;
  margin-left: -50px;
}

关于html - CSS从不同方向更改元素宽度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20060807/