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

Question

我有一个包含这样设置的图像元素的 div:

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

和 CSS:

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

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

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

我已经尝试过背景定位，但没有得到我想要的结果。有谁知道实现此目标的正确方法？

澄清一下，我想实现下面蓝色框中表示的效果(当然，淡出部分实际上不可见):

Answer 1

这是一个相当简单的解决方案...

HTML

<div class="cat"></div>

CSS

.cat {
    position: absolute;
    background-image: url('http://www.deargrumpycat.com/wp-content/uploads/2013/02/Grumpy-Cat1.jpg');
    background-position: right center;
    background-size: 200px 200px; // set bg size
    height: 200px; // no need for container
    width: 150px;
}

DEMO