Вопрос по высоте изображений в bootstrap?

Question

[Денис]

Подскажите делаю слайдер в бутстрап, и еще есть секция с картинками отдельно. У всех картинок в слайдере разная высота, получается как решить вопрос лучше с высотой? Подогнать все картинки под одну высоту в photo shope? По ширине они max-with: 100%; и height: auto; использую бутстрап стиль .img-fluid. И тогда при адаптации будет все аккуратно масштабироваться я так думаю. Или задать блоку со слайдером фиксированную высоту, но тогда придется для каждого устройства в media queries эту высоту подгонять? Или еще есть что получше? Тоже самое думаю для секции картинок делать. Просто сейчас даже при таких стилях они разные по высоте.

img {
  display: block;
  height: auto;
  max-width: 100%;
}

Answer 1

[y0u]

Есть много вариантов реализации:

• Изначально все картинки имеют один размер (это лучший вариант)
  
• Если слайдер бутстраповский - можно вычислить высоту самой большой картинки с помощью JS и задать фиксированную высоту всему слайдеру.
  
• Можно менять высоту каждый раз, когда показывается слайд, предварительно вычислив высоту текущей картинки.
  
• Можно воспользоваться Slick вместо бутстраповской карусели, там можно задать опцию, при которой высота слайдера будет автоматически подгоняться под текущую картинку.
  
• Можно подогнать высоту каждого слайда под один размер с помощью jQuery Match Height
  

Comments

[Сергей delphinpro]

6. можно задать высоту картинки стилями и использовать object-fit
6.1 то же самое, только картинки на фоне + background-size: cover/contain