如何使用.innerHTML修改图片宽度？设置宽度无效问题求助

当然可以用.innerHTML修改图片宽度，你遇到的失效问题大概率是以下原因导致的：

常见原因 #

• 图片固有宽高比限制：浏览器默认会维持图片的原始宽高比，如果你同时设置了height和width属性，浏览器可能会忽略其中一个值来保证比例不失调，导致你的宽度设置未生效。
• CSS样式优先级更高：如果页面中存在针对该图片或其父元素的CSS规则（比如max-width: 100%、width: auto），内联的width属性会被CSS规则覆盖。

解决办法 #

1. 强制固定宽高（忽略比例） #

用style属性设置宽高，它比直接写width/height属性优先级更高，同时可以用object-fit控制图片的适配方式：

display01.innerHTML = "<img src='images/image01.png' style='height:450px; width:800px; object-fit: cover;'>";

object-fit: cover会让图片裁剪后填满指定尺寸，也可以用object-fit: fill直接拉伸图片（不推荐，会变形）。

2. 检查并覆盖CSS限制 #

如果是CSS规则导致宽度失效，可在style中添加对应属性覆盖：

display01.innerHTML = "<img src='images/image01.png' style='height:450px; width:800px; max-width: none;'>";

3. 只设置单一维度（维持比例） #

如果不需要强制固定宽高，只设置height或width其中一个，浏览器会自动计算另一个维度来保持原始比例：

// 只设高度，宽度自动适配
display01.innerHTML = "<img src='images/image01.png' style='height:450px;'>";

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