Twitter Bootstrap: Băng chuyền: Hình ảnh trung tâm theo chiều dọc trong Chiều cao được xác định Viewport

Question

Tôi đang cố gắng tìm cách để căn giữa hình ảnh bên trong chế độ xem của tôi cho băng chuyền. Hiện tại, hình ảnh đang hoạt động tốt và nó đang thay đổi kích thước hình ảnh thành kích thước của chế độ xem trên chiều rộng. Nhưng tôi muốn sử dụng trung tâm của hình ảnh và cắt phần trên cùng và dưới cùng của bức ảnh.

Dưới đây là HTML:

<div class="carousel slide hero"> 
    <div class="carousel-inner"> 
     <div class="active item"> 
      <img src="img/hero/1.jpg" /> 
     </div> 
     <div class="item"> 
      <img src="img/hero/2.jpg" /> 
     </div> 
     <div class="item"> 
      <img src="img/hero/3.jpg" /> 
     </div> 
    </div> 
    <a class="carousel-control left" href=".hero" data-slide="prev">&lsaquo;</a> 
    <a class="carousel-control right" href=".hero" data-slide="next">&rsaquo;</a> 
</div><!-- hero --> 

và các bit nhỏ của css:

.carousel-inner { 
    height: 320px; 
    overflow: hidden; 
} 

Any help is appreciated rất nhiều. Tôi muốn nó để nếu họ tải lên bất kỳ hình ảnh kích thước nó có thể được coi là có thể sử dụng.

Answer 1

Sử dụng những điều sau đây, này vị trí hình ảnh ở trung tâm của khung nhìn băng chuyền và thiết lập chiều cao là 320px

.carousel-inner>.item>img { 
    margin: 0 auto; 
    height: 320px; 
} 

Hy vọng điều này đã giúp bạn ra ngoài

Answer 2

Điều này có thể giúp bạn

Hãy thử Plugin này

https://github.com/tutorialdrive/Bootstrap-Vertical-Thumbnail-Carousel

Và hãy xem qua đây.

Twitter Bootstrap Vertical Thumbnail Carousel

Answer 3

tôi đã thêm một chút để YorickH câu trả lời

.carousel-inner>.item>img { 
margin: 0 auto; 
height: 600px; 
width: 100%; 
} 

Điều này đảm bảo hình ảnh tje kéo dài đến cuối màn hình (hoặc container của bạn), và làm tăng chiều cao một chút để những hình ảnh không bị kéo dài và bị xé toạc.

Answer 4

Nếu bạn không biết chiều cao của hình ảnh, bạn có thể sử dụng phong cách tiếp theo

 
#product-detail .carousel-inner{ 
    height: 500px; 
} 

#product-detail .carousel-inner>.active{ 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 
#product-detail .carousel-inner>.next, 
#product-detail .carousel-inner>.prev{ 
    top: 50%; 
    transform: translateY(-50%); 
} 

đây, #product-detail được sử dụng như wrapper để ghi đè lên phong cách bootstrap.
cũng đừng quên để ủng hộ transform.

Answer 5

Tôi đã giải quyết vấn đề này bằng cách xác định chiều cao .item và làm cho hình ảnh trong nó hoàn toàn vị trí:

.item { 
height: 300px; 
} 

.item img { 
max-height: 100%; 
max-width: 100%; 
position: absolute; 
top: 0; 
bottom: 0; 
left: 0; 
right: 0; 
margin: auto; 
} 

này sẽ làm cho một chiều cao băng chuyền 300px với hình ảnh trung tâm theo chiều dọc và chiều ngang.

Answer 6

tôi muốn tập trung hình ảnh trong băng chuyền hoặc

câu trả lời grigson của làm việc rất lớn trên firefox, nhưng không hoạt động trên Chrome. Vì vậy, sau rất nhiều khó khăn tôi đã đưa ra giải pháp này:

Đặt hình ảnh làm nền của div.mục, vì như vậy bạn có thể dễ dàng đặt chúng mà không làm phiền bố trí:

.carousel-inner .item { 
    width: 100%; /* Your width */ 
    height: 500px; /* Your height */ 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover; /* This also makes sure it fills the whole div */ 
} 

/* add the images to divs */ 
div.item:nth-of-type(1) { 
    background-image: url("../img/carousel-photos/1.jpg"); 
} 

div.item:nth-of-type(2) { 
    background-image: url("../img/carousel-photos/2.jpg"); 
} 

div.item:nth-of-type(3) { 
    background-image: url("../img/carousel-photos/3.jpg"); 
} 

div.item:nth-of-type(4) { 
    background-image: url("../img/carousel-photos/4.jpg"); 
} 

Nó có thể không phải là cách tốt nhất để làm điều đó, nhưng nó hoạt động thực sự tốt cho tôi.