如何修复HTML/CSS网站窗口缩小时图片显示异常问题？

一、图片布局异常的核心原因 #

你的代码里用了绝对定位+固定left值（比如left:400px、left:1125px）和负margin来摆放图片，同时给图片设了固定的width和height。这种方式完全依赖窗口的固定宽度，一旦窗口缩小，图片就会被挤出可视区域，或者互相重叠，导致“隐藏/加载异常”。另外CSS开头的type*是语法错误，应该是*来选择所有元素。

二、具体修复方案 #

1. 重构产品图片布局（用Flexbox实现响应式排列） #

删掉所有单独的图片容器类（.keychain-container、.animal-keychain-container等），把所有产品图片放到一个统一的容器里，用Flexbox实现自动换行和自适应：

修改后的HTML（产品部分）

<div class="products-grid">
    <a href="http://127.0.0.1:5500/keychain.html" class="product-item">
        <img src="Images/8.webp" alt="Chifuyu Ate" title="Chifuyu">
    </a> 
    <a href="http://127.0.0.1:5500/keychain2.html" class="product-item">
        <img src="Images/7.webp" alt="Chifuyu Ate" title="Chifuyu">
    </a>
    <a href="http://127.0.0.1:5500/stickers.html" class="product-item">
        <img src="Images/9.webp" alt="Chifuyu Ate" title="Chifuyu">
    </a>
    <a href="http://127.0.0.1:5500/photocard1.html" class="product-item">
        <img src="Images/10.webp" alt="Chifuyu Ate" title="Chifuyu">       
    </a>
    <a href="http://127.0.0.1:5500/photocard2.html" class="product-item">
        <img src="Images/11.webp" alt="Chifuyu Ate" title="Chifuyu"> 
    </a>
</div>

添加对应的CSS

/* 修复开头的语法错误 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 产品网格布局 */
.products-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* 图片之间的间距 */
    padding: 20px;
}

.product-item {
    flex: 0 1 340px; /* 基础宽度340px，不足时自动缩小 */
    max-width: 340px;
}

.product-item img {
    width: 100%;
    height: auto; /* 保持图片比例，自适应容器 */
    display: block;
}

2. 移除旧的定位CSS #

删掉以下这些旧的定位代码，避免冲突：

/* 删掉这些 */
.keychain-container { ... }
#keychain1 { ... }
.animal-keychain-container { ... }
#keychain2 { ... }
.stickers-container { ... }
#stickers { ... }
.photocard1-container { ... }
#Photocard1 { ... }
.photocard2-container { ... }
#Photocard2 { ... }

3. 启用移动端导航 #

添加媒体查询，在小屏幕上显示移动端导航，隐藏桌面导航：

@media (max-width: 768px) {
    .header-nav:not(.mobile-nav) {
        display: none;
    }
    .header-nav.mobile-nav {
        display: block;
    }
    .header-nav.mobile-nav ul {
        flex-direction: column; /* 移动端导航垂直排列 */
        padding: 10px;
    }
}

三、新手学习建议 #

• 优先掌握现代布局方式：别一开始就用绝对定位布局，先学Flexbox和Grid，这两个是响应式布局的核心，能轻松处理不同屏幕尺寸的排列问题。
• 记住“移动端优先”原则：写CSS时先从手机屏幕的样式开始，再用媒体查询扩展到桌面端，这样能避免很多适配问题。
• 不要给元素设固定宽高：除非是特殊需求，否则用百分比、max-width/min-height这类相对单位，让元素能自适应容器。
• 学会用浏览器调试工具：按F12打开开发者工具，在“元素”面板里实时修改CSS，看效果，这是排查布局问题最快的方法。
• 多写小项目练手：比如模仿电商卡片、博客列表这类常见组件，重点练布局和响应式，比看教程更有用。

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