Как для карусели привести изображения с разными разрешениями к одинаковому?

Question

[Гаджимари Качаев]

У меня имеются изображения, часть из которых в портретной ориентации, а другая часть в альбомной. Я их хочу привести все изображения к одному размеру, например, 268x414. В кач-ве слайдера использую owl. При этом карусель у меня адаптивная. В примерах слайдеров всегда используются картинки с одинаковыми разрешениями, при этом не видел таких, чтобы использовались изображения с разным разрешениями. Или же каждую картинку нужно обрезать и ресайзить под нужное разрешение в фотошопе?

Answer 1

[Roman Zhak]

.stream {
  width: 268px;
  height: 100px;
  margin: 3px;
}
.stream > img {
  max-width: 100%;
  width: auto\9;
  height: 100%;
  vertical-align: middle;
  border: 0;
}

<div class="stream">
 <img src="" >
...
</div>

Comments

[Гаджимари Качаев]

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

[Гаджимари Качаев]

Так я об этом и спрашивал. Возможно ли это в принципе или нет. Как я понял, можно это сделать при помощи фотошопа обрезать фото и изменить размер, чтобы привести все фотки к одному размеру.

[Roman Zhak]

@gadzhimari да, видимо, только так, или попробовать с overflow поиграть

Answer 2

[A K]

Можно так, размер всех слайдов одинаковый
jsfiddle.net/Symphony/L8dfqLrh/embedded/result