css - 裁剪图像并显示右侧（如：非左侧）部分

Question

我正在“裁剪”一个图像（假设是裁剪，因为没有显示整个图像）：

  .carousel img {
        max-width:300%;
        width:150%;
        min-height: 300px;
  }

但是现在显示了左边的部分，但我想显示右边的部分，这可能吗？最好不要将 img 设置为 div 的背景。

编辑：

CSS：

/* Carousel base class */
.carousel {
  margin-bottom: 60px;
}

.carousel .container {
  position: relative;
  z-index: 9;
}

.carousel-control {
  height: 80px;
  margin-top: 0;
  font-size: 120px;
  text-shadow: 0 1px 1px rgba(0,0,0,.4);
  background-color: transparent;
  border: 0;
  z-index: 10;
}

.carousel .item {
  height: 500px;
}
.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; 
 }

 @media (max-width: 979px) {

  .carousel {
    margin-top: -20px;
  }

  .carousel .item {
    height: 500px;
  }
  .carousel img {
        max-width:300%;
        width:150%;
        min-height: 300px;
        align: right;
        float: right;
  }

它在 min-width: 979px; 上一切正常；设备。

HTML：

 <div id="myCarousel" class="carousel slide">
  <div class="carousel-inner">
    <div class="item active">
      <img align="right" src="assets/img/slider/slide-01.jpg" alt="">
      <div class="container">
        <div class="carousel-caption">
          <h1>Title.</h1>
          <p class="lead">Text</p>
          <a class="btn btn-large btn-primary" href="#">Sign up today</a>
        </div>
      </div>
    </div>
   ...

Answer 1

我建议在持有的 div 和 html 上使用这个 css：

.carousel {
    overflow: hidden;
}
html {
    overflow-x: hidden;
}

小提琴：

http://jsfiddle.net/Hive7/6XcHC/1/