盒子的尺寸与照片尺寸不固定

Question

我正在尝试创建一个类似于 https://unsplash.com/ 的照片库（使用 unsplash API -> https://unsplash.com/developers）

但盒子的大小与照片不固定。

    <div className="imageGrid__container">
          <div className="imageGrid__column">
              <div className="imageGrid__item">
                <img
                  className="imageGrid__itemImage"
                  src=""
                />
              </div>
              <div className="imageGrid__item">
                <img
                  className="imageGrid__itemImage"
                  src=""
                />
              </div>
              <div className="imageGrid__item">
                <img
                  className="imageGrid__itemImage"
                  src=""
                />
              </div>
          </div>
          <div className="imageGrid__column">
            
              <div className="imageGrid__item">
                <img
                  className="imageGrid__itemImage"
                  src=""
                />
              </div>
              <div className="imageGrid__item">
                <img
                  className="imageGrid__itemImage"
                  src=""
                />
              </div>
              <div className="imageGrid__item">
                <img
                  className="imageGrid__itemImage"
                  src=""
                />
              </div>
          </div>
          <div className="imageGrid__column">
              <div className="imageGrid__item">
                <img
                  className="imageGrid__itemImage"
                  src=""
                />
              </div>
              <div className="imageGrid__item">
                <img
                  className="imageGrid__itemImage"
                  src=""
                />
              </div>
              <div className="imageGrid__item">
                <img
                  className="imageGrid__itemImage"
                  src=""
                />
              </div>
          </div>
        </div>

CSS 文件：

.imageGrid__container {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 30px;
  padding-left: 100px;
  padding-right: 100px;
}

.imageGrid__item {
  margin-bottom: 20px;
  border: 1px solid red;
  width: 100%;
}

.imageGrid__itemImage {
  width: 100%;
  background-size: cover;
  background-position: center center;
  object-fit: contain;
  background-repeat: no-repeat;
}

你能告诉我我的错误在哪里吗？

不好意思，语言不太好。

我尝试了很多方法，但都没有好转。

Answer 1

inline 和 inline-block 元素由于在一行上设置元素的工作方式而具有额外的空间。您可以使用 display: block; 修复该设置到 img 标签或 margin-bottom: -4px;。

就您而言，我认为 display: block; 更好。

您可以查看的其他解决方案here