html - 使图片行扩展以适应可用空间

Question

我正在尝试用 CSS 创建一个图片库，组织方式如下:

我使用 PHP 加载文件夹的每个图像，并创建我称为行的元素，其中包含相同数量的图片(在我的示例中为 4，垂直对齐)。这些行水平对齐。我希望这些行/列调整它们的宽度，直到它们占据所有可用的垂直空间，这样如果我有 4 个垂直图像，该行看起来更细，如果我有 4 个横向格式图像，则该行水平更宽。见插图:

现在我只有这样的东西:

如果行太多，我就在右边做一个水平滚动条。

我的 html 代码如下:

<div class="gallery">
    <div class="row">
        <div class="frame">
            <img class="gallery-img">
        </div>
        <div class="frame">
            <img class="gallery-img">
        </div>
        <div class="frame">
            <img class="gallery-img">
        </div>
        <div class="frame">
            <img class="gallery-img">
        </div>
    </div>
    <!-- other rows -->
</div>

我的 CSS 如下:

body {
background-color: #dddddd;
}

.gallery {
    width: 100%;
    overflow: auto;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
}

.row {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex-wrap: nowrap;
    align-content: stretch;
    align-items: stretch;
    justify-content: space-around;
}

.frame {
    margin: 2px;
    overflow: hidden;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    box-shadow: inset 5px 5px 40px rgba(0,0,0,0.6);
    -webkit-transition: box-shadow;
    transition: all 0.5s ease;
}

.frame:hover {
    box-shadow: inset 3px 3px 10px rgba(0,0,0,0.6);
}

.gallery-img {
    -webkit-transition: transform;
    transition: all 0.5s ease;
    transform: scale(1);
    position: relative;
    z-index: -1;
}

.frame:hover .gallery-img {
    transform: scale(1.1);  
}

我不知道 flex-grow 是否是这里的解决方案。我已阅读有关 auto-fit 或 auto-fill 的属性，但我不确定如何或在何处使用它。我希望这在其他地方没有得到回答，但我找不到类似的话题。问题是我需要保持图像比例，而不仅仅是填充空白区域。

预先感谢您的帮助!

Answer 1

您可以使用一些 Javascript 在图像加载后获取图像的高度，然后计算每个 .frame 元素应占视口(viewport)的比例。

请参阅下面的演示以及评论中的文档:

window.addEventListener("load", () => {
  const rows = document.querySelectorAll(".row");

for(let row of rows) {
  const frames = row.querySelectorAll(".frame");
  const imgs = row.querySelectorAll("img");
  
  // calculate the sum of heights of all the img elements in a row
  const totalHeight = Array.prototype.reduce.call(imgs, (a, img) => Number(img.naturalHeight) + a, 0);
  
  // sets the height of each frame 
  for( let frame of frames) {
    let imgOfFrame = frame.querySelector("img");
    let fractionForFrame = imgOfFrame.naturalHeight / totalHeight * 100;
    
    
    frame.style.height = fractionForFrame + "vh";
  }
}
});

body {
margin: 0;
padding: 0;
}

.gallery {
  display: flex;
  overflow-x: scroll; /* make the the gallery scrollable*/
}

.row {
  margin-right: 20px;
  flex-shrink: 0; /* make sure the flex items do not shrink*/
}

.row:last-child {
  margin-right: 0;
}

.frame {
  box-sizing: border-box;
  padding: 10px 0; /*creates vertical spacing between images*/
}

.frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /*keeps the image from being distorted if the aspect ratio is off*/
}

<div class="gallery">
  <div class="row">
    <div class="frame"><img src="https://via.placeholder.com/200x400" alt=""></div>
    <div class="frame"><img src="https://via.placeholder.com/200x50" alt=""></div>
    <div class="frame"><img src="https://via.placeholder.com/200x300" alt=""></div>
    <div class="frame"><img src="https://via.placeholder.com/200x100" alt=""></div>
  </div>
  <div class="row">
    <div class="frame"><img src="https://via.placeholder.com/400" alt=""></div>
    <div class="frame"><img src="https://via.placeholder.com/400" alt=""></div>
    <div class="frame"><img src="https://via.placeholder.com/400x200" alt=""></div>
    <div class="frame"><img src="https://via.placeholder.com/400x800" alt=""></div>
  </div>
  <div class="row">
    <div class="frame"><img src="https://via.placeholder.com/500x200" alt=""></div>
    <div class="frame"><img src="https://via.placeholder.com/500x200" alt=""></div>
    <div class="frame"><img src="https://via.placeholder.com/500x200" alt=""></div>
    <div class="frame"><img src="https://via.placeholder.com/500x200" alt=""></div>
  </div>
  <div class="row">
    <div class="frame"><img src="https://via.placeholder.com/200x200" alt=""></div>
    <div class="frame"><img src="https://via.placeholder.com/300x400" alt=""></div>
    <div class="frame"><img src="https://via.placeholder.com/300x200" alt=""></div>
    <div class="frame"><img src="https://via.placeholder.com/300x100" alt=""></div>
  </div>
   <div class="row">
    <div class="frame"><img src="https://via.placeholder.com/500x400" alt=""></div>
    <div class="frame"><img src="https://via.placeholder.com/500x200" alt=""></div>
    <div class="frame"><img src="https://via.placeholder.com/500x300" alt=""></div>
    <div class="frame"><img src="https://via.placeholder.com/500x100" alt=""></div>
  </div>
  
</div>