图像拒绝通过开发人员工具调整大小？

Question

我正在尝试自定义灯箱脚本（原型），以便调整大于视口的图像。我已经成功地插入了一个基本的概念验证来调整灯箱叠加层以及属于它的所有内容，除了一个重要的细节：图像本身不会调整大小。

我尝试在灯箱脚本的不同功能中添加调整大小功能（this.lightboxImage.writeAttribute('width', newWidth)，其中newWidth是计算出的新宽度），但没有结果。经过一些测试后，我设法检查了这些，以确保问题不在我的脚本中：

• 正确计算新宽度
• 在图像获得原始宽度后调用该函数（设置后不会覆盖新宽度）
• 写几个不同的属性都是成功的

事实上，如果我跑：

this.lightboxImage.writeAttribute('width', newWidth);
alert(this.lightboxImage.readAttribute('width');

我收到600警报（我的新宽度，从1023px宽度调整大小）。即使在脚本生成的HTML中，也会显示<img src="pic.jpg" width="600" />。然后我使用dom检查器（在Chrome和IE9中）并尝试更改值，但即便如此，图片仍保持全尺寸。

这到底是怎么回事，我该如何解决？

Answer 1

您可以尝试添加样式以使其更小，而不是尝试更改width属性，例如：

this.lightboxImage.writeAttribute("style", "width: "+newWidth+"px");