#wdsPhoto {
    border: 1px solid #ccc;
    margin: 10px auto;
    max-width: 100%;  /* 改为最大宽度限制 */
    width: 95%;       /* 添加弹性宽度 */
    position: relative;
    box-sizing: border-box; /* 新增盒子模型调整 */
}

#wdsPhoto .top {
    margin: 5px;
    overflow: hidden;
    width: 100%;      /* 改为百分比宽度 */
    position: relative;
    height: auto;     /* 改为自动高度 */
    min-height: 112.5px; /* 保留最小高度 */
}

#wdsPhoto .top DIV,
#wdsPhoto .top A {
    display: block;
    float: left;
    overflow: hidden;
    height: auto;     /* 改为自动高度 */
}

#wdsPhoto .top .prev{
    background: url(button11.gif);
    width: 5%;        /* 改为百分比宽度 */
}

#wdsPhoto .top .thum {
    margin: 0 2%;     /* 改为百分比间距 */
    overflow: hidden;
    width: 88%;       /* 调整百分比宽度 */
}

#wdsPhoto .top .thum DIV A {
    border: 2px solid #ccc;
    width: calc(25% - 12px); /* 改为响应式计算宽度 */
    margin-right: 10px;
    height: 100px;    /* 改用固定高度 */
    opacity: 0.5;
    box-sizing: border-box;
}

#wdsPhoto .main {
    border: 1px solid #ccc;
    background: url(loading.gif) no-repeat center center; /* 改为居中定位 */
    margin: 4px;
    overflow: hidden;
    width: 95%;       /* 改为百分比宽度 */
    height: auto;     /* 改为自动高度 */
    min-height: 400px; /* 添加最小高度 */
    aspect-ratio: 4/3; /* 添加宽高比约束 */
}