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

Answer 2

您可以通过浮动图像来完成此操作。

http://jsfiddle.net/9AmVA/2/

#container {
  /* Making crop dimensions bigger so I can see the edge of the cat to know it's working correctly */
  width: 600px;
  height: 500px;
  overflow: hidden;
}

#container:after { clear: right;
    display: block;
    height: 0;
    visibility: hidden;
    content: ' '; }

#container img {
  float: right;
}

Answer 3

这应该有效：

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

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

Answer 4

.container {
    max-width: 150px;
    min-width: 150px;
    height: 200px
    display: inline-block;
    background-image: url("PATH-TO/YOUR-IMAGE.JPG");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 100%;
    overflow:hidden;
}

.container img {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    visibility: hidden;
}

通过使用背景大小和位置，您将可以更好地控制图像的位置或构图。您也可以使用javascript自动执行此操作。 我建议不要使用id，而要使用className或data属性。