html - 将容器调整为最小元素高度 + 最大宽度

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>

这些图像具有不同的高度。我想调整它们的大小，以便它们的高度都相同，并且在给定可用空间的情况下，它们可以达到最大宽度。

我觉得答案涉及 flexbox 和 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>