liqian
b7e09aeb04
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 3s
68 lines
1.5 KiB
CSS
68 lines
1.5 KiB
CSS
/* 容器高度完全跟随图片真实高度 */
|
||
.fullscreen-img-container {
|
||
position: relative;
|
||
width: 100%;
|
||
min-width: 1280px;
|
||
margin-top:2.49rem;
|
||
aspect-ratio: 16/9; /* 2560/1440=16/9，核心比例约束 */
|
||
/* background: url('../img/yq1.png'); */
|
||
background-size: cover;
|
||
/* 去掉所有强制高度，高度=图片真实高度 */
|
||
}
|
||
|
||
/* 图片按真实比例显示，不拉伸/裁剪（可选cover，看需求） */
|
||
.fullscreen-img {
|
||
width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
/* 如需填满容器，保留cover；如需显示完整图片，改为contain */
|
||
object-fit: cover;
|
||
}
|
||
|
||
/* 文字：修复宽幅+居中生效（仅改定位行） */
|
||
.overlay-text {
|
||
/* 宽幅限制生效 */
|
||
width: 100%;
|
||
min-width: 1280px;
|
||
padding-top: 1.47rem;
|
||
}
|
||
|
||
.overlay-text div {
|
||
width: 100%;
|
||
font-size: 0.63rem;
|
||
color: #cbcfd8;
|
||
text-align: center;
|
||
line-height: 1;
|
||
font-size: 500;
|
||
}
|
||
|
||
.overlay-text p {
|
||
font-size: clamp(16px,1vw,0.22rem);
|
||
color: #cbcfd8;
|
||
text-align: center;
|
||
padding-top: 0.43rem;
|
||
font-family: "HarmonyOS-Light";
|
||
}
|
||
.float-cards {
|
||
display: flex;
|
||
width: 100%;
|
||
justify-content: center;
|
||
position: absolute;
|
||
bottom: -1.05rem;
|
||
gap: 0.2rem;
|
||
}
|
||
.float-cards img {
|
||
/* width: 2.96rem; */
|
||
/* width: 100%; */
|
||
max-width: 2.96rem;
|
||
aspect-ratio:296/215
|
||
}
|
||
.bottom-desc {
|
||
text-align: center;
|
||
color: #cbcfd8;
|
||
font-size: clamp(16px, 1vw, 0.22rem);
|
||
padding-top: 1.9rem;
|
||
width: 100%;
|
||
min-width: 1280px;
|
||
}
|