Cài đặt Bxslider Chiều cao

Question

Vì vậy, tôi chỉ mới bắt đầu sử dụng bxslider.

Tôi tuy nhiên tôi đang gặp sự cố khi đặt kích thước thanh trượt. Đương nhiên nó có chiều cao của yếu tố lớn nhất (tôi nghĩ). Làm cách nào để đặt nó ở độ cao cố định, giả sử 200px?

Answer 1

Bạn có thể thêm css sau.

.bx-wrapper, .bx-viewport { 
    height: 200px !important; //provide height of slider 
} 

Check-out fiddle này .. bxslider

Answer 2

Tại sao không tạo kiểu cho các yếu tố? Nếu bạn đặt chiều cao cố định cho trình bao bọc, bạn có thể gặp rắc rối với việc tràn và định vị.

Nếu bạn đang sử dụng danh sách:

.bx-wrapper ul li { height: 200px; } 

Answer 3

Tôi muốn giới thiệu gói nó với một div sau đó điều chỉnh CSS của div. Bxslider Tôi tin rằng thừa hưởng chiều cao & chiều rộng.

.yourDivClass{ 
    height:200px; 
    width:200px; 
} 

Từ đây bạn có thể điều chỉnh 's phù li: Hope

.yourDivClass li { 
    background-color:green; //just to see the overflow if height & width isn't equal 
} 

này giúp.

Answer 4

Bạn cần phải đặt tất cả 3 yếu tố liên quan với chiều cao của hình ảnh hiển thị mà là container chính, container bên trong và những hình ảnh mình ...

như vậy:

.bx-wrapper, .bx-viewport, .bx-wrapper img {height: 500px !important;} 

• tôi nên lưu ý rằng:
  bxSlider sử dụng chiều rộng 100% để giữ nội dung phản hồi để bạn có thể bị bóp méo hình ảnh bằng cách buộc chiều cao và đó là lý do bạn cần phân phối pr e có kích thước hình ảnh để các thanh trượt (chỉ để khắc phục vấn đề chiều cao ..)

• giải pháp:
  sử dụng truy vấn phương tiện để thiết lập một chiều cao khác nhau khi xem trong điện thoại di động (chỉ cần một gợi ý)

may mắn nhất ...

Answer 5

Cập nhật!

http://jsfiddle.net/u62LR/

Chỉ cần đặt chiều cao hình ảnh của bạn ...

.bx-wrapper, .bx-viewport { 
    height: [IMAGE HEIGHT] !important; 
} 

Answer 6

tôi giải quyết tập trung và kích thước cố định với những dòng

.bx-wrapper img { 
height: 400px; 
max-width: auto; 
display: inline; 

}

Answer 7

này đã làm việc cho tôi, và cho phép bạn giữ đáp ứng

.bx-wrapper, .bx-viewport, .bx-wrapper img {max-height: 200px !important;} 

Answer 8

Nếu bạn don' muốn sử dụng! chỉ cần thực hiện như thế này

.bx-wrapper { 
    height: 400px; //Just choose your height 
    display: block; 
    overflow: hidden; 
}