入门求助：图片无法动态调整尺寸 仅像素设置生效

首先，你的CSS代码存在语法错误——height:12px; width:12px;没写在.color-stem的大括号内，这部分样式根本没作用到目标元素上，这是核心问题之一。

针对你遇到的几个问题，逐个解决：

1. 百分比尺寸无效 #

百分比尺寸是相对于父元素宽高生效的，你得确保父元素（或更上层容器）有明确的宽高值，同时要直接给<img>标签设置尺寸，而非仅给父容器<a>设置：

.color-stem {
  float: left;
  padding: 14px 16px;
  /* 可选：给父容器设基准宽高，让百分比有参考依据 */
  width: 60px;
}

.color-stem img {
  width: 20%; 
  height: auto; /* 保持图片比例，避免拉伸变形 */
}

2. px设置只显示图片顶部 #

你猜测的原因是对的——上层栏元素的overflow:hidden导致了裁剪。之前你没给图片设尺寸，原始图片尺寸远大于容器，超出部分被直接切掉，只露出顶部区域。现在给<img>单独设置尺寸后，图片会适配容器范围，就能完整显示。

3. 非12px时文本不可见 #

之前图片未设置尺寸，会撑大容器或挤压文本布局，再加上overflow:hidden就把文本裁掉了。修正图片尺寸后，容器布局恢复正常，文本就能显示，也能正常滚动查看。

最后修正你的HTML代码（去掉多余的逗号）：

<a href="index.HTML" class="color-stem"><img src="website logo.png"></a>

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