javascript - 如何在一个div中平均显示多个图像

Question

我正在尝试创建一个照片库应用程序，但遇到了一些障碍。我想让每张图片占div的相等部分，例如，如果有两张图片，每张图片占div的50%，如果有三张图片，每张图片占div的33.33%，等等。此外，有没有办法通过 css 将这些图像格式化为方形尺寸？

此外，我还有包含 h2 的照片库 div 和照片库内容 div。目前，我正在硬编码 photos-gallery-content div 的高度以适应父 div，但是有没有办法让该 div 占据其父 div 高度的剩余部分？

最终我希望图片使用 React 动态呈现，因此任何相关的建议/建议也会有很大帮助。

这是我的代码:

#photos {
  width: 634px;
  height: 339px;
}

.photos-gallery {
  width: 634px;
  height: 275.03px;
}

.photos-gallery-header {
  font-size: 24px;
  font-weight: bold;
  line-height: 32px;
  color: #333333;
  border-bottom: 1px solid #E1E1E1;
  padding-bottom: 16px;
  margin: 0 0 16px 0;
  display: flex;
  justify-content: space-between;
}

.photos-gallery-content {
  height: 200px;
}

.photos-gallery-layout {
  height: 200px;
  overflow: hidden;
  float: left;
  display: flex;
  margin: 0;
  padding: 0;
}

.photos-gallery-layout li {
  height: auto;
  float: left;
  list-style: none;
  display: flex;
}

.photo {
  display: inline-flex;
  white-space: nowrap;
}

.photo img {
  max-width: 100%;
  max-height: auto;
  display: inline-block;
  vertical-align: middle;
}

<div id="photos-gallery" class="photos content-block">
  <h2 class="photos-gallery-header"> 2 Photos </h2>
  <div class="photos-gallery-content">
    <ul class="photos-gallery-layout">
      <li class="photos-gallery-li">
        <div class="photo">
          <img src="https://i.imgur.com/8pTwPlXb.jpg" />
        </div>
      </li>
      <li class="photos-gallery-li">
        <div class="photo">
          <img src="https://i.imgur.com/OPAR3PCb.jpg" />
        </div>
      </li>
      <li class="photos-gallery-li">
        <div class="photo">
          <img src="https://i.imgur.com/A8eQsll.jpg" />
        </div>
      </li>
    </ul>
  </div>
  <div>

Answer 1

我使用了您的 HTML 并编写了一些 CSS 来演示如何:

1. 使用 flexbox(父级为 display: flex，子级为 flex: 1)让任意数量的元素以相同的宽度排列在一行中

2. 有<img>使用 object-fit: cover 将元素裁剪为最高元素的形状(在本例中为正方形) (注意 CanIUse 上的兼容性)

.photos-gallery-layout {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.photos-gallery-li {
  flex: 1;
}

.photo,
.photo img {
  height: 100%;
}

.photo img {
  width: 100%;
  object-fit: cover;
}

<ul class="photos-gallery-layout">
  <li class="photos-gallery-li">
    <div class="photo">
      <img src="https://i.imgur.com/8pTwPlXb.jpg" />
    </div>
  </li>
  <li class="photos-gallery-li">
    <div class="photo">
      <img src="https://i.imgur.com/OPAR3PCb.jpg" />
    </div>
  </li>
  <li class="photos-gallery-li">
    <div class="photo">
      <img src="https://i.imgur.com/A8eQsll.jpg" />
    </div>
  </li>
</ul>