.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; }