Размер контейнера до наименьшей высоты изделия + максимальная ширина

Question

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

<div class="container">
    <img src="https://unsplash.it/500/400">
    <img src="https://unsplash.it/400/500">
    <img src="https://unsplash.it/500/500">
</div>

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

У меня такое чувство, что ответ включает в себяflex-box и object-fit:, но я не могу собрать их вместе.

Answer 1

Что-то вроде этого будет работать, и я добавил комментарии, чтобы объяснить логику.

// Find all img elements in .container.
const images = Array.prototype.slice.call(document.querySelectorAll('.container img'));

// Add load event listener
images.forEach(image => image.addEventListener('load', imageLoad));

// Define initial minimum height
let minHeight = Infinity;
let imagesLoaded = 0;

// Image load event handler
function imageLoad(event) {
  // Recalculate minimum image height
  minHeight = Math.min(minHeight, event.target.height);
  imagesLoaded++;
  
  // Apply minimum height once all images are loaded
  if (images.length === imagesLoaded) {
    images.forEach(image => image.style.height = `${minHeight}px`);
  }
}

<div class="container">
  <img src="https://unsplash.it/400/500">
  <img src="https://unsplash.it/500/300">
  <img src="https://unsplash.it/500/500">
</div>