hình ảnh trung tâm băng chuyền twitter-bootstrap reguardless kích thước màn hình

Question

Tôi có những ham muốn sau cho một twitter băng chuyền bootstrap:

1. Khi màn hình lớn thì băng chuyền, tôi muốn hình ảnh làm trung tâm.
2. Khi màn hình nhỏ hơn băng chuyền, tôi chỉ muốn xem PHẦN của hình ảnh. Phần này của hình ảnh nên được căn giữa.
3. Không cần thay đổi kích thước hoặc thu nhỏ hình ảnh
4. Quá trình chuyển đổi sẽ hoạt động.

Ví dụ của tôi bên dưới các sự cố cố định 1-3 .. nhưng nó hỏng 4. Tôi có thể dễ dàng sửa 4 nếu tôi sẵn sàng phá vỡ 3, nhưng điều đó không tốt.

Bootply liên kết với ví dụ: 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

Điều này có thể giúp đỡ nếu bạn muốn hình ảnh được tái kích thước theo kích thước màn hình thiết bị. width = "100%" sẽ thực hiện công việc.

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

Answer 2

thêm này

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

Và dĩ nhiên một trong những divs cha mẹ cần phải có một position: relative, nhưng tôi tin rằng nó theo mặc định.

Xem nó ở đây: http://paginacrestinului.ro/

Answer 3

chỉ thêm video này vào css của bạn:

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