如何实现固定定位的图片展示Div自适应窗口，避免超出屏幕且保持元素对齐

嘿，我完全懂你的困扰——固定展示框里的竖图总容易撑出屏幕，调height又把按钮和文本搞错位，确实挺闹心的。咱们一步步来把这个问题解决掉：

首先，你的核心问题在于容器没限制最大尺寸，而且内部元素没有统一的对齐规则。我给你调整下CSS，既能让图片自适应视口不超出，又能保证按钮、文本和图片始终对齐：

修改后的CSS代码 #

.showcase{
    pointer-events: none;
    opacity: 0;
    scale: 90%;
    position: fixed;
    /* 限制容器最大尺寸，确保不超出屏幕（留10%边距） */
    max-width: 90vw;
    max-height: 90vh;
    width: 85%; /* 小屏幕下保持85%宽度，大屏幕不超90vw */
    z-index: 5;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    transition: all 0.5s ease;
    /* 用flex布局让内部元素垂直对齐，彻底避免错位 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem; /* 元素之间留些间距，视觉更舒服 */
}

.showcase.visible {
    pointer-events: all;
    opacity: 1; /* 这里纠正下你原来的错误：opacity取值是0-1的小数，不是100 */
    scale: 100%;
}

.showcase button{
    align-self: flex-end; /* 让关闭按钮靠右，符合常规使用习惯 */
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.showcase img{
    border-radius: 15px;
    /* 图片自适应容器，严格保持比例不拉伸 */
    max-width: 100%;
    max-height: 70vh; /* 给按钮和文本预留足够空间，避免整体超出视口 */
    object-fit: contain;
}

.showcase p{
    margin: 0;
    text-align: center;
}

关键修改点说明 #

• 容器尺寸限制：用max-width:90vw和max-height:90vh把展示框锁在屏幕范围内，同时保留width:85%适配小屏幕；
• Flex布局：给.showcase加上垂直方向的flex布局，让按钮、图片、文本自动居中对齐，不管图片怎么缩放，其他元素都不会乱跑；
• 图片自适应：去掉原来强制的width:100%和height:100%，改用max-width和max-height让图片根据容器空间自动缩放，object-fit:contain保证图片比例完全不变；
• 细节优化：把关闭按钮靠右对齐，给元素加间距，还修正了opacity的取值错误。

这样改完之后，不管是横图还是竖图，都会自动缩放到合适的大小，整个展示框永远在屏幕内，按钮和文本也能和图片完美对齐啦！

备注：内容来源于stack exchange，提问作者Trainhead