How to bring images with different resolutions to the same for the carousel?

Question

JavaScript

I have images, some of which are portrait and some are landscape. I want to bring all images to the same size, for example, 268x414. I use owl as a slider . At the same time, my carousel is adaptive. The slider examples always use images with the same resolutions, but I have not seen any that use images with different resolutions. Or does each picture need to be cropped and resized to the desired resolution in Photoshop?

Answer 1

.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>

Answer 2

You can do this, the size of all slides is the same
jsfiddle.net/Symphony/L8dfqLrh/embedded/result