本文讲解绝对初学者常遇到的图片尺寸设置失效问题：当 <img> 嵌套在 <a> 标签内时，直接为父元素（如 .color-stem）设置宽高无效，必须显式选中 img 元素并为其单独定义 width 和 height。
本文讲解绝对初学者常遇到的图片尺寸设置失效问题：当 `` 嵌套在 `` 标签内时，直接为父元素（如 `.color-stem`）设置宽高无效，必须显式选中 `img` 元素并为其单独定义 `width` 和 `height`。
在 HTML 中，<img> 是替换元素（replaced element），其尺寸默认由图像原始分辨率决定；CSS 中对父容器（例如 .color-stem）设置 width/height 并不会自动缩放内部图片——它只约束容器自身大小，而图片可能溢出、裁剪，甚至因 overflow: hidden 被截断（正如你观察到的“只显示顶部”现象）。
✅ 正确做法是：直接为 <img> 元素应用样式。有两种推荐方式：
方式一：使用后代选择器（推荐，语义清晰）
.color-stem img {
width: 12px;
height: 12px;
display: block; /* 可选：消除行内元素默认基线间隙 */
}对应 HTML 保持原样：
<a href="https://www.php.cn/link/7812d18c11eba4daf3953e61cffd4028" class="color-stem"> <img src="website logo.png" alt="网站标志"> </a>
方式二：将 class 移至 <img> 标签上
<a href="https://www.php.cn/link/7812d18c11eba4daf3953e61cffd4028"> <img class="color-stem" src="website logo.png" alt="网站标志"> </a>
.color-stem {
width: 12px;
height: 12px;
display: block;
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 避免仅设置 height 或 width 单边值（如只设 height: 12px），否则图片可能严重变形；建议同时指定宽高，或使用 max-width: 100%; height: auto; 保持比例（适用于响应式场景）。
- 确保图片路径正确（你示例中为 website logo.png，含空格，建议改用短横线命名如 website-logo.png，避免潜在解析问题）。
- 添加 alt 属性是可访问性基本要求，不可省略。
- 若需图片居中对齐或垂直居中，可在 .color-stem 上添加 display: flex; align-items: center;，并确保 img 无额外外边距。
? 小结：CSS 样式不继承宽高属性，父容器尺寸 ≠ 子元素尺寸。要改变图片本身显示大小，必须直接作用于 <img> 元素——这是前端开发中最基础却最易忽略的关键原则。
