LightSlider как выровнять контент?

428
15 марта 2017, 18:52

Добрый день уважаемые. Подскажите пожалуйста, как добиться что б данный слайдер обрезал все слайды по одной высоте, в независимости от размеров фото (вертикальные или горизонтальные кадры)? Читал эту документацию и пока не нашел http://sachinchoolur.github.io/lightslider/ Мой код

window.onload = function () { 
 
 
    $(".box-sliderOne__items").lightSlider({ 
        item: 3, 
        adaptiveHeight: true, 
        autoWidth: false, 
        loop: true, 
        controls: true, 
        // thumbItem:0, 
        gallery: true, 
        thumbMargin: 2, 
        onSliderLoad: function(el) { 
            el.lightGallery(); 
        } 
 
    }); 
 };

При уменьшении экрана проблема остается

Для полноты картины исходники тут https://github.com/BlackStar1991/gbo Фаил index.html styles/main.scss

Answer 1

блоку в котором находится фото задать определенную высоту и ширину(фиксированную), я не посмотрел исходники, но если картинки в теге img , то лучше использовать

div {background-image},

так как это лучше если у вас картинки разных размеров, при этом задать блоку

{background-size:cover;},

так картинка более внятно и красиво будет выглядеть, если не хотите ничего менять просто задайте фиксированную высоту блоку в котором сама картинка. если картинка очень нестандартная,

{background-size:cover;}

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

{background-position: значение , значение;}

Answer 2

Каждое изображение вы можете обернуть в див, которому зададите фиксированную высоту и обрезание изображения внутри него:

div{
  position:relative;
  height:100px;
  overflow:hidden;
}
READ ALSO
Поделить html файл на страницы

Поделить html файл на страницы

Как разбить html файл на несколько страниц? Допустим у меня есть блоки <div> которые, как, допустим вопросы на этом ресурсе, и нужно было чтобы...

415
Drag and Drop Jquery загрузка файлов - проблема с Firefox

Drag and Drop Jquery загрузка файлов - проблема с Firefox

Добрый день! Делаю загрузку файлов на ajax через drag and dropВ хроме все работает гуд, а вот в Mozilla ошибка

362
Internal Server Error при использовании Ajax фильтра

Internal Server Error при использовании Ajax фильтра

Есть сайт на wordpress, на котором используется ajax фильтрПри использовании нескольких выборок (по одиночке и dropdown, и checkbox, и фильтр google map, и фильтр...

456