Grid布局图片自适应问题：.test需与图片同尺寸且无裁剪

针对你的需求，核心是让.test容器完全贴合图片尺寸，同时图片在父容器内按比例完整显示（不裁剪、无滚动条），以下是关键CSS修改：

1. 调整.item3的布局，确保内部空间被充分利用 #

原.item3使用display:grid但未定义网格轨道，导致内部元素无法获取明确的空间约束，改为flex布局实现内容居中并填满可用空间：

.item3 {
    grid-row: 2 / span 5;
    grid-column: 1 / span 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffffc5;
    border-radius: 10px;
    border: 2px solid rgb(5, 53, 245);
    padding: 10px; /* 避免边框与图片紧贴 */
    box-sizing: border-box; /* 内边距计入总宽高 */
}

2. 优化.gridImage的空间约束 #

让.gridImage成为图片的直接约束容器，限制其最大宽高不超出父容器：

.gridImage {
    position: relative;
    border-radius: 10px;
    max-width: 100%;
    max-height: 100%;
}

3. 让.test完全贴合图片尺寸 #

使用inline-block使容器紧紧包裹图片，同时限制最大宽高避免溢出：

.test {
    position: relative;
    border-radius: 10px;
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
}

4. 调整图片的缩放规则 #

去掉强制宽高100%，改用max-width和max-height让图片按自身比例缩放，配合object-fit:contain保证完整显示：

.responsiveImage {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

修改说明 #

• 原代码中.item3的display:grid未发挥作用，改为flex后能更直接地实现内容居中并利用全部可用空间
• .test的inline-block属性会让容器尺寸完全由内部图片决定，满足"与响应式图片尺寸完全一致"的要求
• 图片的max-width/max-height确保不会超出父容器范围，object-fit:contain保证图片比例不变且完整显示
• 所有修改均避免了overflow裁剪或滚动条的出现，同时支持页面横纵向缩放

内容的提问来源于stack exchange，提问作者마라야