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>
   ...