Twitter的引導中心圓盤傳送帶圖像reguardless屏幕尺寸

Question

的我有一個Twitter的引導傳送帶下面的慾望：

1. 當屏幕是更大然後轉盤，我想中心的圖像。
2. 當屏幕小於旋轉木馬時，我只想看到圖像的一部分。這部分圖片應該居中。
3. 在任何時候都不應該調整圖像大小或縮放比例
4. 過渡應該起作用。

我在下面的例子中修復了問題1-3 ..但是它打破了4.如果我願意打破3，我可以很容易地修復4，但這並不好。

Bootply鏈接，例如：http://bootply.com/88542

HTML：

<!-- Carousel 
================================================== --> 
<div id="myCarousel" class="carousel slide"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
    <li data-target="#myCarousel" data-slide-to="2"></li> 
    </ol> 
    <div class="carousel-inner"> 
    <div class="item active"> 
     <img src="http://lorempixel.com/1200/600/abstract/1" height="600px" width="1200px"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Bootstrap 3 Carousel Layout</h1> 
      <pthis is="" an="" example="" layout="" with="" carousel="" that="" uses="" the="" bootstrap="" 3="" styles.<="" small=""><p></p> 
      <p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a> 
     </p></pthis></div> 
     </div> 
    </div> 
    <div class="item"> 
     <img src="http://lorempixel.com/1200/600/abstract/2" height="600px" width="1200px"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Changes to the Grid</h1> 
      <p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p> 
      <p><a class="btn btn-large btn-primary" href="#">Learn more</a></p> 
     </div> 
     </div> 
    </div> 
    <div class="item"> 
     <img src="http://placehold.it/1200X600" height="600px" width="1200px"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Percentage-based sizing</h1> 
      <p>With "mobile-first" there is now only one percentage-based grid.</p> 
      <p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p> 
     </div> 
     </div> 
    </div> 
    </div> 
    <!-- Controls --> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
    <span class="icon-prev"></span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
    <span class="icon-next"></span> 
    </a> 
</div> 
<!-- /.carousel --> 

CSS

/* BOOTSTRAP 3.x GLOBAL STYLES 
-------------------------------------------------- */ 
body { 
    padding-bottom: 40px; 
    color: #5a5a5a; 
} 



/* CUSTOMIZE THE CAROUSEL 
-------------------------------------------------- */ 

/* Carousel base class */ 
.carousel { 
    margin-bottom: 60px; 
} 
/* Since positioning the image, we need to help out the caption */ 
.carousel-caption { 
    z-index: 10; 
} 

/* Declare heights because of positioning of img element */ 
.carousel .item { 
    height: 600px; 
    width: 1200px; 
    background-color:#bbb; 
    left: 50%; 
    margin-left: -600px; 
} 
.carousel img { 
    position: absolute; 
    top: 0; 
} 



/* RESPONSIVE CSS 
-------------------------------------------------- */ 

@media (min-width: 768px) { 

    /* Remve the edge padding needed for mobile */ 
    .marketing { 
    padding-left: 0; 
    padding-right: 0; 
    } 

    /* Navbar positioning foo */ 
    .navbar-wrapper { 
    margin-top: 20px; 
    margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */ 
    } 
    /* The navbar becomes detached from the top, so we round the corners */ 
    .navbar-wrapper .navbar { 
    border-radius: 4px; 
    } 

    /* Bump up size of carousel content */ 
    .carousel-caption p { 
    margin-bottom: 20px; 
    font-size: 21px; 
    line-height: 1.4; 
    } 

} 

Answer 1

這可能幫助，如果你想根據屏幕尺寸的圖像重新大小裝置。 width = "100%"將完成這項工作。

<img src="http://lorempixel.com/1200/600/abstract/2" width = "100%"> 

Answer 2

添加此

.carousel .item img { 
    left: -9999px; /*important */ 
    right: -9999px; /*important */ 
    margin: 0 auto; /*important */ 
    max-width: none; /*important */ 
    min-width: 100%; 
    position: absolute; 
} 

當然和家長的div的人都需要有一個位置：相對的，但我相信它的默認操作。

見這裏：http://paginacrestinului.ro/

Answer 3

只是添加到您的CSS：

.carousel-inner > .item > img, .carousel-inner > .item > a > img { 
    width: 100%; 
}