.amd-box { width: 100%; background: #000; overflow: hidden; max-width: 1440px; min-width: 1280px; margin: 0 auto; } .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-1 { margin-top: 0.06rem; } .amd-img-2, .amd-img-3, .amd-img-4, .amd-img-5, .amd-img-6 { margin-top: 0.2rem; } .fade-in { opacity: 1 !important; transform: translateY(0) !important; visibility: visible !important; } /* 原有图片样式(重点修改) */ .amd-img-1-1 { width: 100%; /* 移除height:100%,改用auto保持比例 */ height: auto; max-height: 4.28rem; /* 保留最大高度限制 */ 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: 710/210; overflow: hidden; /* 裁剪超出部分(可选) */ } .amd-img-2-1 img, .amd-img-2-2 img { width: 100%; height: 100%; display: block; } .amd-img-3 { display: flex; gap: 0.2rem; } .amd-img-3-left, .amd-img-3-right { flex: 1; width: 50%; height: 100%; } /* 3-1-left:540高度的比例(假设原始宽710,高540 → 710/540≈1.31) */ .amd-img-3-1-left { width: 100%; aspect-ratio: 710/540; overflow: hidden; } /* 3-2-right:710:210比例 */ .amd-img-3-2-right { width: 100%; aspect-ratio: 710/261; margin-top: 20px; overflow: hidden; } .amd-img-3-1-right img, .amd-img-3-2-right img { width: 100%; height: 100%; display: block; } /* 统一处理其他图片容器的比例 */ .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; }