电子作品集网站移动端图片尺寸显示异常问题求助

问题原因 #

• 类名匹配错误：你提供的HTML代码中img标签的class属性值为about.me__img，但CSS中对应的选择器是.about-me__img，类名里的分隔符.错写为-，导致设置的width: 100%规则未生效，是移动端图片尺寸异常的核心原因。
• 响应式属性缺失：仅设置width: 100%不足以覆盖所有移动端适配场景，缺少宽高比保持的相关规则。

修复方案 #

1. 修正HTML中的类名拼写 #

把img标签的class值从about.me__img改为about-me__img，和CSS选择器保持一致，修改后的代码如下：

<figure class="about-me__img--container">
    <img src="./assets/undraw_Online_cv_re_gn0a.svg" class="about-me__img" alt="">
</figure>

2. 补充CSS响应式适配规则 #

给图片类增加max-width: 100%和height: auto规则，确保图片不会超出父容器宽度，同时自动保持原始宽高比不会变形；也可根据设计需求给容器增加居中、最大宽度限制规则，优化多端显示效果，修改后的代码如下：

.about-me__img--container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center; /* 可选，让图片在容器内水平居中 */
    margin-top: 48px;
    animation: fade-in 1200ms 800ms backwards;
}

.about-me__img {
    width: 100%;
    max-width: 400px; /* 可选，根据设计需求调整最大宽度，避免大屏下图片过大 */
    height: auto;
}

@keyframes fade-in {
    0% {
        opacity: 0;  
    }
    100% {
        opacity: 1;
    }
}

内容的提问来源于stack exchange，提问作者rbeatt