Фотогалерея на bootstrap для изображений разных размеров

#javascript #html #css #bootstrap #slider

Делаю страничку, на которой пользователи заливают картинки, а потом эти картинки
отображаются в слайдере. Картинки  оказываются разных размеров и с разными расширениями,
из-за чего слайдер при смене изображения либо меняется в высоте если картинка большая,
либо становиться виден серый фон слайдера если картинка маленькая. Как можно сделать,
чтобы слайдер не менялся в размерах при смене изображения, а все картинки растягивались
по всему слайдеру? Естественно, нужно, чтобы адаптивность слайдера не была потеряна. 
    

Ответы

Ответ 1

Попробуйте плагин фоторама. Все картинки разных размеров.













  
  
  
  
  







  
  
  
  
  







  
  
  
  
  




Ответ 2

Лично я бы решил эту проблему так: 
В серверном обработчке использовал бы функцию обрезки изображения (сам недавно ее
использовал - ссылка) и при загрузке фото обрезал бы их по необходимому формату и спокойно
вывел бы в разметку.
Более гибкий плагин карусели, который я использовал в своих проектах - slick (первая
ссылка в гугле)


Ответ 3

привет, тут нету вашего кода, но я бы сделал так:

если картинки у вас в IMG то, лучше убрать IMG  и вместо него использовать какой-нибудь
блочный элемент и картинку задать ему фоном и вот тогда ему уже можно задать фиксированную
ширину и высоту и использовать backgroun-size: cover;

таким образом все картинки точно будут в контейнере и ни куда не будут вылазить и
не будет ни какого фона видна