Установите высоту слайдера изображения на высоту наименьшего изображения

Question

Im использует http://bxslider.com/ для чувствительного слайдера изображения. В настоящее время ползунок устанавливает высоту как высоту самого большого изображения. Я хочу сделать его наименьшим изображением и отрезать все излишки для изображений, которые больше, чем самые маленькие.

Я пробовал adaptiveHeight: true, но это приводит к тому, что содержимое слайдера перемещается по мере изменения размера ползунка. Я попытался использовать css, и почти все работало.

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

Проблема я был здесь был 300px выглядел идеально подходит для моего экрана, но у меня есть отзывчивый сайт, чтобы, когда я рассматривал это на небольшом экране было огромное количество белого пространства под изображением, так как 300px было далеко слишком большой.

Answer 1

Имеют разные разрешения экрана для вашего приложения. Затем с помощью @media запросов, чтобы изменить CSS:

Что именно приведенный ниже код делает для вашего HTML:

1. Первой вещь, каждая страница браузера будет иметь свой собственный размер вида порта или размер окна.
2. Медиа-запросы, основанные на размере окна.
3. Если ваш размер окна находится под определенным диапазоном, эти стили применяются.
4. Чтобы сделать ваш BX Slider отзывчивым, в зависимости от размера экрана, мы настраиваем 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 */ 
} 

Я сделал это для первых двух. Имейте это в качестве шаблона, и вы можете проверить на различных разрешениях с помощью адаптивного дизайна тестере Chrome в инструментах разработчика:

Answer 2

ползунок устанавливает высоту на bx-viewport через JS, в ответ на размер экрана (AKA ответно).

, если вы хотите сила размер изображения, на который вы могли бы нацелиться .bx-wrapper img, но вам нужны медиа-запросы, иначе вы потеряете отзывчивость.