flex布局卡片组件尺寸过小无法适配全尺寸屏幕全屏显示该如何调整

• 核心问题是你给外层容器.container、卡片.box、内部模块都设置了固定像素宽高，不管屏幕尺寸如何变化，元素尺寸都固定不变，自然无法铺满屏幕，也没法适配不同分辨率的设备。
• 没有给html、body设置基础全宽全高属性，默认是内容撑开高度，就算给容器设置百分比宽高也不会生效。
• 内部图片没有设置适配规则，容易出现拉伸变形的问题。

直接替换你的CSS代码为以下内容即可：

/* 先重置全局默认样式，设置基础宽高 */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 避免hover放大卡片时出现滚动条 */
}
.container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    /* 替换固定宽高为视口全宽全高，铺满屏幕 */
    width: 100vw;
    height: 100vh;
    display: flex;
}
.container .box{
    position: relative;
    /* 替换固定宽度为flex:1，自动平分容器宽度 */
    flex: 1;
    /* 替换固定高度为占满容器 */
    height: 100%;
    background: #ccc;
    transition: 0.5s;
}
.container .box:hover{
    transform: scale(1.1);
    z-index: 1;
    box-shadow: 0 5px 20px rgba(0,0,0,1);
}
.container .box .thumb{
    position: absolute;
    width: 100%;
    /* 替换固定高度为占卡片一半 */
    height: 50%;
    overflow: hidden;
}
.container .box:nth-child(odd) .thumb {
    bottom: 0;
    left: 0;
}
.container .box .thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover; /* 避免图片拉伸变形 */
}
.container .box .details{
    position: absolute;
    width: 100%;
    /* 替换固定高度为占卡片一半 */
    height: 50%;
    overflow: hidden;
    background: #262626;
}
.container .box:nth-child(even) .details {
    bottom: 0;
    left: 0;
}
.container .box:nth-child(1) .details {
    background: #65214a;
}
.container .box:nth-child(2) .details {
    background: #fd3f41;
}
.container .box:nth-child(3) .details {
    background: #ffb539;
}
.container .box .details .content{
    position: absolute;
    top: calc(50% + 16px);
    transform: translateY(-50%);
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    transition: 0.5s;
}
.container .box:hover .details .content{
    top: calc(50%);
}
.container .box .details .content h3{
    margin: 0;
    padding: 10px 0;
    color: #fff;
}
.container .box .details .content a{
    display: inline-block;
    padding: 5px 20px;
    color: #fff;
    border: 2px solid #fff;
    text-decoration: none;
    transition: 0.5s;
    border-radius: 20px;
    transform: scale(0);
}
.container .box:hover .details .content a{
    transform: scale(1);
}
.container .box .details .content a:hover{
    background: #fff;
    color: #262626;
}
/* 移动端适配可选，屏幕宽度小于768px时卡片纵向排列 */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

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