.amd-box { width: auto; background: #000; /* overflow: hidden; */ max-width: 14.4rem; /* min-width: 1280px; */ margin: 0 auto; /* margin-top:-3.5rem; */ } .amd-img-box { max-width: 14.4rem; /* 移除height:100%,避免继承高度导致比例失效 */ } /* 动画基础样式(保留,仅微调) */ .amd-img-1, .amd-img-2, .amd-img-3, .amd-img-4, .amd-img-5, .amd-img-6 { max-width: 14.4rem; } .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: 14.4rem; display: block; } .amd-img-2 { display: flex; gap: 0.2rem; } /* 710:210比例的容器(核心修改) */ .amd-img-2-1, .amd-img-2-2 { flex: 1; width: 50%; } .amd-img-2-1 img, .amd-img-2-2 img { width: 7.11rem; display: block; } .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; width: 7.11rem; } /* 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: 7.11rem; height: 100%; display: block; } /* 统一处理其他图片容器的比例 */ .amd-img-4 { width: 14.4rem; } .amd-img-4 img { width: 100%; height: 100%; display: block; } .amd-img-5 { /* max-width: 1440px; */ width: 100%; display: flex; gap: 0.2rem; } .amd-img-5 img { flex: 1; width: 7.11rem; display: block; } .amd-img-6 { width: 14.4rem; } .amd-img-6 img { width: 100%; height: 100%; display: block; }