Instagram配置文件布局与Css(样式组件)

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，如果我关闭窗口，它将调整宽度和高度，但是，这就是我得到的

宽度是我所期望的，但高度并不接近293px

Instagram的(丑陋的(布局照片

为什么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%;
}
}

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