如何调整卡片高度适配任意屏幕且底部文字overlay不被裁切

解决方案 #

调整图片的裁剪规则和叠加层的定位逻辑即可实现需求，核心是让图片高度不足时优先裁剪顶部，同时让叠加层固定在卡片底部不会被裁切。

具体改动点：

• 给卡片添加overflow: hidden，避免内容溢出破坏圆角效果
• 给图片设置object-position: bottom，高度不足时自动裁剪图片顶部，保留底部和叠加层相邻的区域
• 叠加层放弃负margin的定位方式，改为绝对定位固定在卡片底部，同时补充盒模型声明避免内边距导致宽度溢出

修改后的完整CSS代码：

.HomeButtons-body{
    text-align: left;
    padding-right: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
    padding-top: 1vh;
}

.top-card{
    border-radius: 5%;
    height: 30vh;
    background-color: black;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: hidden; /* 新增：裁剪超出卡片的内容 */
}

/* 新增图片样式 */
.image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom; /* 核心：高度不足时裁剪图片顶部，保留底部 */
}

.overlay1 {
    position: absolute; 
    bottom: 0; /* 新增：固定在卡片底部 */
    left: 0; /* 新增：对齐卡片左边界 */
    background: rgb(228, 22, 123, 0.75); 
    color: #f1f1f1; 
    width: 100%;
    min-height: 9vh; /* 改为min-height，适配文字高度 */
    opacity: 1 !important;
    color: white;
    font-size: 6vw;
    font-weight: bold;
    padding: 20px;
    text-align: left;
    box-sizing: border-box; /* 新增：内边距不会撑大宽度 */
}

内容的提问来源于stack exchange，提问作者Ndango