CSS для включения двух изображений разной крысы ios для заполнения ширины контейнера и равной высоты

Question

Я пытаюсь выровнять два изображения по горизонтали таким образом, чтобы, если одно изображение было ориентировано в горизонтальной плоскости, а другое - в вертикальной ориентации, они подстраивали их размеры под одинаковую высоту и заполняли ширину контейнера. Изображения добавляются динамически и могут иметь любое соотношение.

Мой текущий подход влечет за собой:

.container {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap; 
}
.image {
  flex: 1; 
}

<div class="container">
   <img class="image" src="dynamic-source">
   <img class="image" src="dynamic-source">
</div>

Изображения, чтобы помочь объяснить проблему, в настоящее время у меня есть следующее:

Текущий результат

То, что я пытаюсь выполнить sh:

Цель

Обратите внимание, что в «цели» изображение 1 увеличилось по высоте и ширине , в то время как изображение 2 уменьшило свою высоту и ширину, в то время как оба поддерживают своих крыс ios.

Спасибо!

Answer 1

Добавьте фиксированную высоту к .container, затем измените свой .image класс

.container {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap; 
  height: 500px;
}
.image {
  /* flex: 1;  */
  object-fit: cover;
  height: 100%;
}

Answer 2

протестируйте ваш код и получите целевой результат jsfiddle

, если по-прежнему не работает, добавьте width: 100%; в стиль img.

Answer 3

Вы можете попробовать заменить свойство align-items: center на align-items: stretch или просто удалить свойство, так как значение по умолчанию для align-items в любом случае растягивается.

Это растянет ваши гибкие элементы, чтобы заполнить доступное пространство.