Question

我正在尝试创建一个照片库应用程序，但遇到了一些障碍。我想让每个图像占用div的相等部分，例如，如果有两个图像，则每个图像都占div的50％；如果有三个图像，则每个图像都占div的33.33％，依此类推。此外，是否有一种方法可以通过CSS将这些图像格式化为正方形尺寸？

此外，我还有包含h2和photos-gallery-content div的photos-gallery 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来演示如何：

使用flexbox（父级上的display: flex和子级上的flex: 1）使任意数量的项目在同一行中的宽度相等。
使用<img>（注意CanIUse的兼容性）将object-fit: cover元素裁剪为最高元素的形状（在本例中为正方形）
< / li>

.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>

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

1 个答案: