liqian
b7e09aeb04
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 3s
151 lines
2.3 KiB
CSS
151 lines
2.3 KiB
CSS
.amd-box {
|
||
width: 100%;
|
||
background: #000;
|
||
overflow: hidden;
|
||
max-width: 1440px;
|
||
min-width: 1280px;
|
||
margin: 0 auto;
|
||
margin-top:-2rem;
|
||
|
||
}
|
||
|
||
.amd-img-box {
|
||
width: 100%;
|
||
/* 移除height:100%，避免继承高度导致比例失效 */
|
||
}
|
||
|
||
/* 动画基础样式（保留，仅微调） */
|
||
.amd-img-1,
|
||
.amd-img-2,
|
||
.amd-img-3,
|
||
.amd-img-4,
|
||
.amd-img-5,
|
||
.amd-img-6 {
|
||
width: 100%;
|
||
}
|
||
|
||
.amd-img-2,
|
||
.amd-img-3,
|
||
.amd-img-4,
|
||
.amd-img-5,
|
||
.amd-img-6 {
|
||
margin-top:0.15rem;
|
||
}
|
||
.fade-in {
|
||
opacity: 1 !important;
|
||
transform: translateY(0) !important;
|
||
visibility: visible !important;
|
||
}
|
||
|
||
/* 原有图片样式（重点修改） */
|
||
.amd-img-1-1 {
|
||
max-width: 14.4rem;
|
||
width: 100%;
|
||
/* 移除height:100%，改用auto保持比例 */
|
||
height: auto;
|
||
|
||
/* aspect-ratio: 1440/429; */
|
||
display: block;
|
||
}
|
||
|
||
.amd-img-2 {
|
||
display: flex;
|
||
gap: 0.2rem;
|
||
}
|
||
|
||
/* 710:210比例的容器（核心修改） */
|
||
.amd-img-2-1,
|
||
.amd-img-2-2 {
|
||
flex: 1;
|
||
width: 50%;
|
||
/* 固定宽高比：710/210 ≈ 3.38，反向则210/710≈29.58% */
|
||
/* aspect-ratio: 711/261; */
|
||
overflow: hidden; /* 裁剪超出部分（可选） */
|
||
}
|
||
|
||
.amd-img-2-1 img,
|
||
.amd-img-2-2 img {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
aspect-ratio: 711/261;
|
||
}
|
||
|
||
.amd-img-3 {
|
||
display: flex;
|
||
height: auto;
|
||
gap: 0.2rem;
|
||
}
|
||
|
||
|
||
.amd-img-3-left,.amd-img-3-right {
|
||
flex: 1;
|
||
height: auto;
|
||
width: 50%;
|
||
}
|
||
.amd-img-3-right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between
|
||
}
|
||
.amd-img-3-left img {
|
||
display: block;
|
||
aspect-ratio: 711/541;
|
||
}
|
||
|
||
|
||
/* 3-2-right：710:210比例 */
|
||
.amd-img-3-1-right,.amd-img-3-2-right {
|
||
width: 100%;
|
||
}
|
||
|
||
|
||
.amd-img-3-1-right img,
|
||
.amd-img-3-2-right img {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
aspect-ratio: 711/261;
|
||
}
|
||
|
||
/* 统一处理其他图片容器的比例 */
|
||
.amd-img-4 {
|
||
max-width: 1440px;
|
||
aspect-ratio: 1440/178; /* 按原始1440:178比例固定 */
|
||
}
|
||
|
||
.amd-img-4 img {
|
||
width: 100%;
|
||
height: 100%;
|
||
/* object-fit: cover; */
|
||
display: block;
|
||
}
|
||
|
||
.amd-img-5 {
|
||
max-width: 1440px;
|
||
display: flex;
|
||
gap: 0.2rem;
|
||
aspect-ratio: 1440/260; /* 1440:260比例 */
|
||
}
|
||
|
||
.amd-img-5 img {
|
||
flex: 1;
|
||
width: 50%;
|
||
height: 100%;
|
||
/* object-fit: cover; */
|
||
display: block;
|
||
}
|
||
|
||
.amd-img-6 {
|
||
max-width: 1440px;
|
||
aspect-ratio: 1440/260; /* 1440:260比例 */
|
||
overflow: hidden;
|
||
}
|
||
|
||
.amd-img-6 img {
|
||
width: 100%;
|
||
height: 100%;
|
||
/* object-fit: cover; */
|
||
display: block;
|
||
}
|