Как сделать так, чтобы размер несвязанных изображений был одинаковым в CSS?

Question

Что я хочу сделать

Совместите изображения разных размеров и форм в одном кадре.(только CSS)
При изменении размера браузера размер изображения также изменяется пропорционально.

---

Текущий статус

JSFiddle
На данный момент хорошо работает только горизонтальное изображение.
Меньшие изображения становятся больше, большие - меньшепоместиться внутри рамы.

Как вы можете видеть в демонстрации Fiddle, квадрат и вертикаль не работают хорошо.

Как я могу сделать это для всех фигур?

---

Код

Это то же самое, что и JSFiddle.
Рекомендуется посмотреть на JSFiddle, так как дисплей может быть немного странным.

/* swiper (doesn't matter) */
var swiperCnt = new Swiper('.swiperCnt', {
  direction: 'vertical',
  autoHeight: true,
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: 'true',
  },
  keyboard: {
    enabled: true,
  },
  mousewheel: {
    forceToAxis: true,
    invert: true,
  },
});

/* The orange "big square" is crushed by the "small vertical" below and is less visible. */
.swiper-slide {
  display: flex;
  align-items: center;
  padding: 1%;
}
.swiper-slide img {
  width: 100%;
}

.swiper-container {
  displey: flex;
  width: 400px;
  height: 300px;
}

p {
  white-space: pre-wrap;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet"/>

<div class="swiper-pagination"></div>
<div class="swiper-container swiperCnt max">
  <div class="swiper-wrapper imgs max-inner">
    <div class="swiper-slide"><img class="work" src="https://placehold.jp/ed3232/ffffff/200x100.png?text=small%20horizontal" alt="smallHorizontal" /></div>
    <div class="swiper-slide"><img class="work" src="https://placehold.jp/392fed/ffffff/500x350.png?text=big%20horizontal" alt="bigHorizontal" /></div>
    <div class="swiper-slide"><img class="work" src="https://placehold.jp/beed2f/424242/100x100.png?text=small%20square" alt="smallSquare" /></div>
    <div class="swiper-slide"><img class="work" src="https://placehold.jp/edab2f/ffffff/800x800.png?text=big%20square" alt="bigSquare" /></div>
    <div class="swiper-slide"><img class="work" src="https://placehold.jp/ed3232/ffffff/100x250.png?text=small%20vertical" alt="smallVertical" /></div>
    <div class="swiper-slide"><img class="work" src="https://placehold.jp/392fed/ffffff/500x600.png?text=big%20vertical" alt="bigVertical" /></div>
  </div>
</div>

<p>
     1) small horizontal       2) big horizontal       3) small square       4) big square       5) small vertical       6) big vertical
</p>


<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>

Answer 1

Задайте ширину и высоту изображения и используйте object-fit: contain;

.swiper-slide {
  box-sizing: border-box; // <-- needed to compensate for padding
  display: flex;
  align-items: center;
  padding: 1%;
  img {
    width: 100%;  // <-- set width
    height: 100%; // <-- set height
    object-fit: contain; // <-- makes sure image fits 100% x 100%x
  }
}

JSfiddle

Также см. Документы для подгонки объекта на MDN