css - 裁剪图像并显示右侧(如 : not-left) part

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;
}

fiddle :

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