带有 Css 的 Instagram 个人资料布局（样式化组件）

Question

我正在尝试在 react 中做 Instagram 用户的照片布局，实际上我之前在 css 网格课程中做过

问题是，这次不行，我不知道怎么做，我尝试了很多东西，我不知道为什么我的 img 没有调整到我想要的尺寸

让我给你看代码

所以，我就是这样做的

  return (
    <UserPhotosHero>
      <ContainUserPhotos>
        {specificPhotos &&
          specificPhotos.map(photo => {
            return (
              <AnimatePresence>
                <UserPersonalPhotos
                  key={photo.id}
                  variants={PopUp}
                  initial="hidden"
                  animate="visible"
                >
                  <img src={photo.photo} />
                </UserPersonalPhotos>
              </AnimatePresence>
            );
          })}
      </ContainUserPhotos>
    </UserPhotosHero>
  );
};

这些是样式

// User Photos

export const UserPhotosHero = styles.section`

width: 75%;
min-height: 40vh;

margin: auto;
margin-bottom: 6rem;
margin-top: 4.5rem;


`;

export const ContainUserPhotos = styles.div`

display: grid;
grid-template-columns: repeat(3, minmax(100px, 293px));
justify-content: center;
grid-gap: 2.8rem;

`;

export const UserPersonalPhotos = styles(motion.div)`

position: relative;
cursor: pointer;

z-index: 2;

img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

`;

预期输出：正如我之前提到的，我在另一门课程中做到了，我必须查看代码，以便我可以引导自己，并且，我期望发生什么是，3列，每列是一个div，每个div的大小将是宽度293px，高度293px，如果我关闭窗口，它会调整宽度和高度，但是，这就是我得到的

我期望的宽度的图像，但高度不接近 293 像素

Instagram's (ugly) layout photo

为什么 img 的大小没有接近 293px ？我做错了什么？

Answer 1

鉴于您提供的代码，您将受制于图像的纵横比。如果您的图像不是正方形，那么您将不会得到正方形。样式化组件 CSS 中的任何内容都不会设置高度； grid-template-columns 只会指定宽度。如果你想要一个方形图像，你可能想尝试用padding-bottom: 100%和position: relative将你的图像包装在一个div中，然后如果你绝对定位你的图像它应该给你你想要的......像这样（请注意我没有测试过这段代码）：

.image-wrapper {
  padding-bottom: 100%; // this will give you an aspect ratio of 1:1 (square)
  position: relative;
  width: 100%;
  img {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }
}

另外...确保在 map 函数中为 <AnimatePresence /> 组件添加一个键...React 中的组件数组都需要一个唯一的键。您可能只使用图像的来源作为您的密钥。