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

Question

我正在尝试创建类似于 https://unsplash.com/ (with 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 元素有额外的 space。您可以使用 display: block; 修复该设置到 img 标签或 margin-bottom: -4px;.

对于你的情况，我认为 display: block; 更好。

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

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

size of the box is not fixed with the photo size

html

javascript

css

grid

reactjs

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