將圖像滑塊高度設置爲最小圖像的高度

Question

將http://bxslider.com/用於響應圖像滑塊。滑塊當前將高度設置爲最大圖像的高度。我想使它成爲最小圖像的高度，並切斷大於最小圖像的任何多餘圖像。

我試過adaptiveHeight: true，但是這會導致滑塊下面的內容在滑塊大小調整時左右移動。我試圖使用CSS和以下幾乎工作。

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

我在這裏是300像素看起來非常適合我的屏幕上的問題，但我有一個負責任的網站，所以當我看到這個更小的屏幕上出現了一個巨大的圖像下方的白色空間量，因爲300像素遠太大。

Answer 1

爲您的應用程序提供不同的屏幕分辨率。然後使用@media查詢更改CSS：

完全下面的代碼不會向你的HTML內容：

1. 的第一件事是，每種瀏覽器頁面將擁有自己的視口的大小，或窗口大小。
2. 基於窗口大小的媒體查詢。
3. 如果您的窗口大小屬於特定範圍，則會應用這些樣式。
4. 爲了使您的BX滑塊響應，基於屏幕尺寸，我們調整了height。

/* Default Style */ 
.bx-wrapper, .bx-viewport { 
    height: 300px !important; 
} 
/* Smartphones (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
    .bx-wrapper, .bx-viewport { 
     height: 250px !important; 
    } 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen and (min-width : 321px) { 
    .bx-wrapper, .bx-viewport { 
     height: 275px !important; 
    } 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen and (max-width : 320px) { 
/* Styles */ 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
/* Styles */ 
} 

/* iPads (landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { 
/* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 
/* Styles */ 
} 
/********** 
iPad 3 
**********/ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 
/* Desktops and laptops ----------- */ 
@media only screen and (min-width : 1224px) { 
/* Styles */ 
} 

/* Large screens ----------- */ 
@media only screen and (min-width : 1824px) { 
/* Styles */ 
} 

/* iPhone 4 ----------- */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 

/* iPhone 5 ----------- */ 
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* iPhone 6 ----------- */ 
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* iPhone 6+ ----------- */ 
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* Samsung Galaxy S3 ----------- */ 
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* Samsung Galaxy S4 ----------- */ 
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
} 

/* Samsung Galaxy S5 ----------- */ 
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
} 

我這樣做是爲了第2位。保持這個爲模板，你可以使用Chrome的響應式設計測試的開發者工具在不同的分辨率測試：

Answer 2

滑塊設置通過JS上bx-viewport高度，以應對屏幕尺寸（AKA響應）。

如果您想要強制您可以定位的圖像大小爲.bx-wrapper img，但是您需要媒體查詢，否則您的響應速度會變慢。