为什么无法调整Cloudinary存储的图片尺寸？附相关CSS与HTML代码

问题原因及解决方案 #

• 第一个也是最核心的问题：CSS选择器与HTML元素ID不匹配
  你CSS中给图片设置样式的选择器是#skills-img，但HTML里img标签的ID属性是skills-image，二者完全不一致，导致你写的width: 100%、height: 100%规则根本没有作用在图片元素上，所以图片会默认保持Cloudinary返回的原始尺寸。
  修复方式：把CSS中的选择器改为#skills-image即可。
• 可选优化：调整object-fit属性适配显示需求
  你当前用的object-fit: contain会保持图片原始宽高比，完整显示整张图片，可能导致150px的圆形容器上下/左右出现留白。如果需要让图片完全填满容器、没有留白，可以将该属性改为object-fit: cover，超出容器的部分会被自动裁剪，显示效果更适配圆形头像类的场景。
• 进阶优化：直接在Cloudinary URL中指定尺寸
  Cloudinary支持通过URL参数直接返回指定尺寸的图片，你可以在图片URL中加入w_150,h_150,c_fill参数，直接获取符合容器尺寸的图片资源，既可以避免前端缩放的性能损耗，也能减少图片加载体积，提升加载速度。

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